Файл: Способы оформления web-страниц приложения (CSS, темы) (CSS в решении проблем оформления web-страниц).pdf
Добавлен: 04.04.2023
Просмотров: 328
Скачиваний: 2
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. Рассмотрим использование свойств на следующем примере.
<html><head>
<style type='text/css'>
#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>
<meta http-equiv="Content-type" content="text/html;
charset=<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="wrapper">
Внутри тега 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>
<footer></footer>
<?php wp_footer(); ?>
</body>
</html>
После этого можно закрывать открытые блоки и вызывать wp_footer(), чтобы добавить скрипты футера WordPress.
После этого нужно сделать шаблон обычной страницы WordPress путем
создания в папке темы файла page.php и добавлением в него следующего кода:
<?php get_header(); ?>
<div class="main-heading">
<h1><?php the_title(); ?></h1>
</div>
<section>
<?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 необходимо вставить разметку для логотипа:
<div class="wrapper">
<header>
<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a>
</header>
После создания меню, нужно его показать на страницах сайта. Для этого в конец header.php добавляется код:
<nav class="main-navigation">
<? 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/Каскадных таблиц стилей позволяет овладеть искусством построения фнкциональных, удобных и красивых многостраничных сайтов.