Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание:

Введение

Разработчики современных сайтов, сталкиваясь и решая проблемы удобного оформления web-страниц, единодушны во мнении, что администрировать дизайн лучше всего с использованием технологии CSS (Cascading Style Sheets). Стили – это набор параметров для управления видом и положением элементов страницы сайта. Это также незаменимый инструмент для разработки тем (шаблонов). Он быстрый, адаптивный и универсальный.

Актуальность темы данной курсовой работы заключается в том, что технология Cascading Style Sheets будет и дальше активно развиваться, как зарекомендовавшая себя в качестве удобного инструмента, востребованность и повсеместное использование созданных продуктов будут расширяться.

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

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

Объектом темы исследования является CSS.

Предмет исследования – технологии использования каскадных таблиц стилей при создании web-страниц.

При написании курсовой работы были изучены литературные источники по направлению технологий проектирования web-сайтов и построения web-страниц таких авторов: Горнаков С. Г. , Грачев Андрей, Джон Дакетт.

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

1. Способы оформления web-страниц приложения (CSS, темы)

1.1.Теоретические аспекты

Любая компания, как правило, представляет себя в информационном пространстве посредством сайта – современного интернет-ресурса для расширения бизнеса, поиска новых клиентов и реализации имеющихся товаров и услуг.

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

При создании сайтов используются различные системы управления контентом (CMS) - это системы средств автоматизации : шаблонов, программных модулей, операторов, скриптов и т.д.[1] В их числе – наиболее используемые: платные (Datalife engine, 1-C Бит-рикс, S. Duilder и др.) и бесплатные (WordPress, Joomla, Drupal, Hostcms и др.) (рисунок 1).

Рис.1. Функции систем управления контентом

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

Выбор CMS происходит исходя из конкретных задач, которые должен выполнять разрабатываемый сайт, и правильности оценки системы [2].

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

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

При разработке качественного сайта необходимо соблюдение определенного условия грамотного планирования разработки (рисунок 2).

Рис.2. Этапы создания сайта

Прежде всего заказчику проекта необходимо определиться с основной концепцией сайта : цель создания информационного ресурса и определение круга лиц, для кого сайт предназначен. Маркетинговым планированием при разработке сайта определяется его внешний вид и наполнение, обозначается миссия организации.

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

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

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

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

Каждый сайт управляется системой управления контентом (движком). Система управления (CMS) выполняет администрирование обновления информации на ресурсе и отвечает за размещение контента. С помощью ее функций создаются разделы, страницы, тексты, проводится SEO-анализ, структурируется информация. Выбор системы происходит в зависимости от назначения проекта.

К информации, которая должна быть размещена на сайте, предъявляются специальные требования. Это должны быть уникальные и структурированные тексты, точно характеризующие предоставляемые услуги. Контент для сайта должен быть составлен заранее, к моменту запуска CMS должна быть возможность сразу наполнить проект подготовленной информацией. Кроме этого, следует подобрать картинки, фото, видео по тематике сайта. Нужно отметить, что комплексную разработку сайта компании характеризуют все составляющие для полноценной работы ресурса, начиная от создания технической платформы до наполнения и продвижения его глобальной сети.

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

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

В результате анализа данных по использованию систем управления контентом, можно сказать об убедительном перевесе среди бесплатных таких систем, как Wordpress и Joomla, а среди платных -1С-Битрикс (рисунок 3).

Рассмотрим вкратце преимущества перечисленных систем по сравнению с другими аналогами.

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

Рис.3. Процентное соотношение использования CMS

Преимущественно он используется при создании блогов и сайтов-визиток. Достоинством WordPress является удобная панель управления, наличие базовых возможностей для создания сайтов, удобство работы с текстами и изображением, простота в настройке и установке, наличие интересных бесплатных дизайнов и удобной системы установки дополнений. К недостаткам следует отнести неудобство работы с переводами и ориентированность на блогинг.

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

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

1С-Битрикс является идеальным вариантом для создания корпоративных сайтов и порталов, его линейка ориентирована именно на это, в этом смысле ему нет равных. Несмотря на высокую цену, 1С-Битрикс - идеальное решения для сайта.

1.2. Оформление Web-страниц

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

Для отображения обычного текста можно написать его в любом текстовом редакторе (например, Блокнот (Пуск > Программы > Стандартные > Блокнот) и запустить полученный html-файл на выполнение. В браузере получим следующее отображение (рисунок 4).

Рис.4. Пример отображения текста в браузере

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

Cascading Style Sheets (СSS) - это язык, который содержит набор свойств для описания внешнего вида любых HTML документов и который позволяет дизайнеру полностью контролировать стиль и расположение каждого элемента web-страницы, что гораздо функциональнее использования обычного набора HTML тегов.

Существует три вида таблиц стилей:

внутренние таблицы стилей;
глобальные таблицы стилей;
связанные таблицы стилей.

Внутренние таблицы стилей (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги (рисунок 5). Глобальные (Global Style Sheets) определяют стиль элементов во всем документе. Связанные (Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле [6].

Рис.5. Пример отображения текста с использованием

внутренней таблицы стилей

Текст выражения следующий:

<html>

<head>

<title> Пример CSS </title>

</head>

<style>

.blue {color:blue; font-style:italic}

#boldunderline {text-decoration:underline; font-weight:bold}

</style>

<body>

<p class="blue"> КУРСОВАЯ РАБОТА «СПОСОБЫ ОФОРМЛЕНИЯ WEB-СТРАНИЦ ПРИЛОЖЕНИЯ (CSS, ТЕМЫ)» </p>

<p class="blue" id="boldunderline"> "ДОБРЫЙ ДЕНЬ, ТАК ВЫГЛЯДИТ ТЕКСТ С ИСПОЛЬЗОВАНИЕМ СТИЛЕЙ."</p>

</body>

</html>

Глобальный стиль задает вид элементов во всемо документе. Для этого используется тег <STYLE type="text/css">, который размещается в заголовке документа . Например,

<html>

<head> <title> КУРСОВАЯ РАБОТА «СПОСОБЫ ОФОРМЛЕНИЯ WEB-СТРАНИЦ ПРИЛОЖЕНИЯ (CSS, ТЕМЫ)» </title>

</head>

h1{color:red; font-style:italic; font-size:32px}

.blue{color:blue}

#bold{font-weight:bold}

</STYLE>

<body>

<h1> ЗАГОЛОВОК: КУРСИВ КРАСНОГО ЦВЕТА </h1>

Вот <font class="blue"> это </font> СЛОВО – СИНИМ ЦВЕТОМ, a <font id="bold"> ТАК МОЖНО ЗАДАВАТЬ ТИП ШРИФТА</font> - ТИП ШРИФТА.

</body>

</html>

В данном примере (рисунок 6) все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими, а все элементы с идентификатором ID="Bold" будут жирными. Для простоты вместо <STYLE type="text/css"> используем тег <STYLE.

Рис.6. Пример отображения текста с использованием

глобальной таблицы стилей

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

body {background:black; font-size:9pt; color:red; font-family:Arial Black}

.base{color:blue; font-style:italic}

h1 {color:white}

#bold {font-weight:bold}

</STYLE>

В html-документах документах ссылка на этот файл styles.css выполняется при помощи тега <link>. Выглядит это так: <link rel="stylesheet" type="text/css" href="styles.css">. Например, рассмотрим ссылку из файла index.html.

<html>

<head>

<title> КУРСОВАЯ РАБОТА «СПОСОБЫ ОФОРМЛЕНИЯ WEB-СТРАНИЦ ПРИЛОЖЕНИЯ (CSS, ТЕМЫ)» </title>

</head>

< link rel="stylesheet" type="text/css" href="styles.css">

<body>

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

Цветовые схемы выбранной темы, как правило, применяются к основным элементам 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 (повторяющийся сферический градиент).

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

2.6.Построение блоковых моделей

Элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin.

Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо от друг друга: padding-top, padding-right, padding-bottom, padding-left.

Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left.

Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left. Рассмотрим использование свойств на следующем примере.

#wrap {margin:0px;

padding:20px;

height:160px;

background-color:yellow;

}

.ex1 {border:10px red solid;margin-left:50px;margin-right:10px;

padding:15px;background-color:green;color:white;}

.ex2 {border:5px brown solid;margin-top:30px;margin-left:250px;

margin-right:70px;padding:15px;background-color:green;

color:white;}

</style></head><body><div id='wrap'>

<div class='ex1'>Содержимое первого элемента</div>

<div class='ex2'>Содержимое второго элемента</div>

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

Результатом работы стилей построения блоковых моделей станет изображение (рисунок 14).

Рис.14.Построение блоковых моделей посредством CSS

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

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

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

3.CSS в создании темы для web-сайта

3.1.Установка темы

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

Шаблоны для сайтов на WordPress можно получить несколькими способами:

выбрать предложенные темы из каталога wordpress.org;
приобрести премиум тему;
заказать собственную разработку у программистов;
создать шаблон самостоятельно.

Рассмотрим создание собственной темы на основе готового шаблона самого популярного на сегодня движка WordPress (рисунок 15).

Рис.15. Внешний вид админ-панели WordPress

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

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

Для начала необходимо зайти в панель администратора, во вкладке внешнего вида, затем перейти к темам. Здесь откроются установленные доступные темы. Для выбора и установки новой темы необходимо перейти по ссылке сверху «Добавить новую». По вкладке «Фильтр характеристик» темы WordPress сортируются по цветам, разметке страниц и функциям.

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

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

Но самым распространенным является способ загрузки через FTP-клиента, например, через FileZilla. Этот бесплатный FTP-клиент также позволяет скачивать данные с FTP-серверов.

Рис.16. Главное окно FTP-клиента с хранилищем тем сайта

3.2.Верстка темы с помощью CSS

Итак, вначале необходимо на хостинге в папке themes создать папку шаблона темы, допустим «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css (рисунок 17).

Рис.17. Папка с темой «whitesquare» на хостинге

Дальше нужно добавить скриншот темы, сохранив созданное в FotoShop изображение главной страницы из psd-проекта (размером 880х660) с именем screenshot.png.

После этого тема может быть использована. Если зайти в админ-панель, то можно увидеть ее в списке тем. Ее необходимо активировать по нажатию клавиши «Activate».

Рис. 18. Активация темы в админ-панели WordPress

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

Макет сайта состоит из шапки (Header) и подвала(Footer), повторяемых на всех страницах. На страницах, кроме главной, слева есть сайдбар. Для того чтобы руководство было более универсальным, страницы главного меню могут быть оформлены как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями.

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

Уже упоминалось, что большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Но можно создать полноценный сайт на WordPress в рамках готовых макетов. Рассмотрим структуру страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name.

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order нужно цифрой указать порядок страницы в главном меню. После добавления, список страниц может выглядеть таким образом:

Рис.19. Перечень страниц сайта в админ-панели WordPress

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого необходимо зайти в меню Settings -> Reading и в поле Front page displays указать: A static page -> Home.

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

Можно создать файл header.php в папке собственного шаблона и наполнить его содержимым. Например:

<!doctype html>

<html>

<head>

charset=<?php bloginfo('charset'); ?>">

<?php wp_head(); ?>

</head>

Внутри тега head необходимо установить кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке нужно поставить вызов команды wp_head(), которая добавит заголовки WordPress.

Также нужно открыть блок «wrapper» и подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого в файл functions.php внутри темы нужно добавить следующий код:

function enqueue_styles() {

wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri());

wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300');

wp_enqueue_style( 'font-style');

}

add_action('wp_enqueue_scripts', 'enqueue_styles');

function enqueue_scripts () {

wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js');

wp_enqueue_script('html5-shim');

}

add_action('wp_enqueue_scripts', 'enqueue_scripts');

В функции enqueue_styles зарегистрированы и подключены нужные стили с указанием для WordPress, что функция является подключением стилей. Аналогичные действия нужно выполнить и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Его содержимое должно быть прописано в файле footer.php.

</div>

<?php wp_footer(); ?>

</body>

</html>

После этого можно закрывать открытые блоки и вызывать wp_footer(), чтобы добавить скрипты футера WordPress.

После этого нужно сделать шаблон обычной страницы WordPress путем
создания в папке темы файла page.php и добавлением в него следующего кода:

<?php get_header(); ?>

</div>

<?php if (have_posts()): while (have_posts()): the_post(); ?>

<?php the_content(); ?>

<?php endwhile; endif; ?>

</section>

<?php get_footer(); ?>

В этой процедуре прописано подключение файлов шапки и футера, создание блока названия страницы и в теге section вставлен стандартный блок вывода контента страниц и постов.

Для стилизации страницы нужно сохраните фоны в файлы изображений images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

body { color: #8f8f8f; font: 12px Tahoma, sans-serif; background: #f8f8f8 url(images/bg.png);

border-top: 5px solid #7e7e7e; margin: 0;}

img { border: 0;}

p { margin: 20px 0;}

.alignleft { float: left;}

.alignright { float: right;}

.aligncenter { display: block; margin-left: auto; margin-right: auto;}

.input { background-color: #f3f3f3; border: 1px solid #e7e7e7;

height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top;

}

.button { color: #fff; background-color: #29c5e6; border: none;

height: 32px; font-family: 'Oswald', sans-serif;}

.image { border: 1px solid #fff; outline: 1px solid #c9c9c9;}

figure img { display: block;}

.wrapper { max-width: 960px; margin: auto;}

header { padding: 20px 0;}

.main-heading { background: transparent url(images/h1-bg.png);

margin: 30px 0; padding-left: 20px;}

.main-heading h1 { display: inline-block; color: #7e7e7e;

font: 40px/40px 'Oswald', sans-serif; background: url(images/bg.png);

margin: 0; padding: 0 10px; text-transform: uppercase;}

aside { float: left; width: 250px;}

aside + section { margin-left: 280px; padding-bottom: 50px;}

footer { clear: both; background: #7e7e7e; color: #dbdbdb; font-size: 11px;}

После окончания работ с каркасом основной страницы, можно приступать к ее наполнению. Изображение логотипа должно быть сохранено на хостинге в папке images/. В шаблон шапки, в файле header.php необходимо вставить разметку для логотипа:

<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a>

</header>

После создания меню, нужно его показать на страницах сайта. Для этого в конец header.php добавляется код:

<? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?>

</nav>

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu». После этого меню уже появится на страницах но без стилей. Стилизуем его:

.main-navigation {

background: #f3f3f3;

border: 1px solid #e7e7e7;

}

.top-menu {

margin: 0;

padding: 0;

}

.top-menu li {

display: inline-block;

padding: 10px 30px;

margin: 0;

text-transform: uppercase;

list-style-position: inside;

font: 14px 'Oswald', sans-serif;

}

.top-menu li.current_page_item {

background: #29c5e6;}

.top-menu a {

color: #b2b2b2;

text-decoration: none;

}

.top-menu li.current_page_item a {

color: #fff;

}

При вёрстке в файле footer.php в файле style.css также прописываются стили.

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

В третьей главе курсовой работы на тему «Способы оформления web-страниц приложения (CSS, Темы)» были описаны приемы по созданию собственных страниц сайта. На основании изученного материала можно делать вывод о разнообразных подходах при создании тем сайтов: использование готовых шаблонов, модификация готовых шаблонов или создание совершенно собственных. В последних двух случаях используются технологии верстки, в том числе перестройка стилей макета сайта. Можно сделать вывод о том, что изучение свойств Cascading Style Sheets/Каскадных таблиц стилей позволяет овладеть искусством построения фнкциональных, удобных и красивых многостраничных сайтов.

Заключение

Первая часть данной курсовой работы посвящена изложению теоретических аспектов выбранной темы, в ней также дано описание стилистике построения web-страниц. Рассмотрено такое важное свойство web-сайтов, как налаживание коммуникации между людьми. В этом важная роль принадлежит правильному оформлению интерфейса и контента сайта. Не последняя роль в этом принадлежит Cascading Style Sheets/Каскадных таблиц стилей.

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

В работе также описаны приемы по созданию страниц сайта на основе

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

На основании изученного материала можно говорить о важности Cascading Style Sheets (CSS), как надежного инструмента по созданию современных средств коммуникации и донесения информации до широкого круга пользователей. Это – универсальный инструмент, который позволяет создавать статические страницы, хорошо передающие замысел дизайнера. Дополнительно необходимо сказать об важности изучения возможностей CSS, которые являются отправными при изучении JavaScript.

Обобщая, можно сделать вывод: изучение свойств Cascading Style Sheets/Каскадных таблиц стилей позволяет овладеть искусством построения функциональных, удобных и красивых многостраничных сайтов.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Горнаков С. Г. Осваиваем популярные системы управления сайтом (CMS). - М. : Directmedia, 2013. -326 с.
Грачев Андрей. Создаем свой сайт на WordPress.-Питер,2014.-288 с.
Джон Дакетт. HTML и CSS. Разработка и дизайн веб-сайтов.- Изд.: Эксмо, 2013.-480 с.
Никсон Робин. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5.- Изд.:Питер,2015.-688 с.
Прохоренок Николай, Дронов Владимир. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера.- СПб.: БХВ-Петербург,2015.-766 с.
Ташков П. А. Веб-мастеринг, 2-е издание.- Питер, 2013.- 512 с.
Хассей Трис.WordPress для профессионалов, 2-е издание.-2015.-432 с.
Холыпплаг, Молли Е. Языки HTML и CSS : для создания Web-сайтов, 3-е издание.- М.: ТРИУМФ, 2013. — 304 с.: ил.
Фрейн Бен.HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. .-СПб:Питер,2014.-560 с.
Эрик Фримен, Элизабет Фримен. Изучаем HTML, XHTML и CSS, 2-е издание.-СПб:Питер,2014.-720 с.