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

Введение

Разработчики современных сайтов, сталкиваясь и решая проблемы удобного оформления 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>

<p id="boldunderline"> </p>

</body>

</html>

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

<html>

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

</head>

<STYLE type="text/css">

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. Пример отображения текста с использованием

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

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

<STYLE type="text/css">

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.