Главная Случайная страница


Категории:

ДомЗдоровьеЗоологияИнформатикаИскусствоИскусствоКомпьютерыКулинарияМаркетингМатематикаМедицинаМенеджментОбразованиеПедагогикаПитомцыПрограммированиеПроизводствоПромышленностьПсихологияРазноеРелигияСоциологияСпортСтатистикаТранспортФизикаФилософияФинансыХимияХоббиЭкологияЭкономикаЭлектроника






Добавление содержимого на web-сайт

МИНИСТЕРСТВО СЕЛЬСКОГО ХОЗЯЙСТВА РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «БАШКИРСКИЙ ГОСУДАРСТВЕННЫЙ АГРАРНЫЙ УНИВЕРСИТЕТ»

 

 

Кафедра информатики и

Информационных технологий

 

 

УЧЕБНАЯ ПРАКТИКА

РАЗРАБОТКА САЙТА НА CMS DRUPAL

Методические указания

 

для направления подготовки бакалавров

080500 Бизнес-информатика

 

Уфа 2013


 

УДК 338.48-44(1-21)

ББК 74.58: 32.973

М54

 

Рекомендовано к изданию методической комиссией факультета информационных технологий и управления (протокол № от г.)

 

 

Составители: доц. Беляева А.С.,

ассистент Саттарова С.Ф.,

Николкин П.

 

 

Рецензент: ст. преподаватель Агишев Т.Х.

 

 

Ответственный за выпуск: зав. кафедрой информатики

и информационных технологий доц. Беляева А.С.

ОГЛАВЛЕНИЕ

1 ВЕБ ДИЗАЙН. ИЗУЧЕНИЕ HTML, CSS. РАЗРАБОТКА САЙТА НА CMS DRUPAL 4

2.1 ОСНОВНЫЕ ТЕГИ HTML. 4

1.2 АТРИБУТЫ ТЕГОВ.. 13

1.3 ССЫЛКИ HTML. 14

1.4 ИЗОБРАЖЕНИЯ В HTML. 17

1.5 ТАБЛИЦЫ HTML. 20

2 ВВЕДЕНИЕ В CSS. 27

2.1 ЧТО ТАКОЕ CSS. 27

2.2 КАК РАБОТАЕТ CSS. 29

2.3 ЦВЕТ И ФОН CSS. 33

2.4 ШРИФТЫ CSS. 40

4.5 ТЕКСТ CSS. 45

2.6 ССЫЛКИ CSS. 48

2.7 ИДЕНТИФИКАЦИЯ И ГРУППИРОВАНИЕ ЭЛЕМЕНТОВ (CLASS И ID) 52

2.8 ГРУППИРОВАНИЕ ЭЛЕМЕНТОВ (SPAN И DIV) 55

2.9 БОКСОВАЯ МОДЕЛЬ. 58

2.10 ПОЛЯ И ЗАПОЛНЕНИЕ. 60

2.11 РАМКИ CSS. 62

2.12 HEIGHT / ВЫСОТА И WIDTH / ШИРИНА.. 66

2.12 ВСПЛЫВАЮЩИЕ ЭЛЕМЕНТЫ (ПОПЛАВКИ) 67

2.13 ПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ.. 70

2.14 НАСЛОЕНИЕ С ПОМОЩЬЮ Z-INDEX (СЛОИ) 73

3 ЗНАКОМСТВО С CMS (СИСТЕМА УПРАВЛЕНИЯ КОНТЕНТОМ) DRUPAL 76

3.1 ОБЗОР И УСТАНОВКА ИНСТРУМЕНТОВ ДЛЯ РАЗРАБОТКИ.. 78

3.2 УСТАНОВКА DRUPAL 7 И ВСПОМОГАТЕЛЬНЫХ МОДУЛЕЙ.. 86

3.3 УСТАНОВКА ВСПОМОГАТЕЛЬНЫХ МОДУЛЕЙ.. 96

3.4 ПЕРЕВОД DRUPAL НА РУССКИЙ ЯЗЫК.. 106

3.5 ИЗУЧЕНИЕ ПАНЕЛИ АДМИНИСТРАТОРА И АДМИНИСТРАТИВНЫХ РАЗДЕЛОВ DRUPAL. 112

3.6 СТРУКТУРА DRUPAL. 137

3.6.1 Раздел "Типы материалов". 137

3.6.2 Таксономия DRUPAL. 161

3.6.3 Регионы и блоки в Drupal 7. 176

3.6.4 Модули и темы оформления в Drupal 7. 193

 


 

1 ВЕБ ДИЗАЙН. ИЗУЧЕНИЕ HTML, CSS. РАЗРАБОТКА САЙТА НА CMS DRUPAL

1.1 ОСНОВНЫЕ ТЕГИ HTML

Введение

В этом первом уроке мы кратко представим вам утилиты, которые нужны для создания web-сайта.

У вас есть «браузер/browser». Это программа просмотра web-страниц.

Не важно, какой браузер у вас имеется. Обычно это Microsoft Internet Explorer. Но есть и другие - Opera и Mozilla Firefox, и их также можно использовать.

Вам нужен простой текстовый редактор. Если вы используете Windows, то в ней есть Notepad, который обычно находится в меню Старт, Программы, Стандартные:

Рисунок 1 Местонахождение Notepad

Что такое HTML?

HTML это «родной язык» вашего браузера (программы просмотра вэб-страниц).

Говоря кратко, HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Tim Berners-Lee мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.

HTML это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните «View» в линейке меню вашего браузера и выберите «Source».

Для чего я могу использовать HTML?

Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней. Хорошей новостью является то, что HTML легко изучать и использовать.

Как расшифровывается H-T-M-L?

HTML это сокращение от «HyperText Mark-up Language / язык гипертекстовой разметки».

 

Что такое HTML-тэги?

Теперь вы готовы начать изучение HTML-тэгов.

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

Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">".

Обычно имеются два тэга - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш "/".

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.

Из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br />.

HTML - это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.

 

Примеры HTML тегов

Тэг <b> информирует браузер, что весь текст между <b> и </b> должен быть напечатан жирным шрифтом. ("b" это сокращение для "bold".)

Пример 1:

 

<b>This text must be bold.</b>

 

Тэги <h1>, <h2>, <h3>, <h4>, <h5> и <h6> указывают браузеру создавать заголовки (h для "heading"), где <h1> это заголовок первого уровня - самый крупный шрифт, <h2> - заголовок второго уровня - шрифт меньшего размера, и <h6> - заголовок шестого уровня - самого низкого в этой иерархии, и самый маленький шрифт.

Пример 2:

 

<h1>Это заголовок</h1> <h2>Это подзаголовок</h2>

 

 

Регистр тегов HTML

Большинству браузеров безразлично, в каком регистре введены буквы тэгов. <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.

 

Создайте свой первый сайт

После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.

Мы узнали, что необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа - текстовый редактор). Откройте Notepad (в Accessories в Programs - Start menu):

Начнём с чего-нибудь проще. Страницы, на которой написано: "Ура! Это моя первая web-страница."

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

Во-первых, необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тэгом <html>. Так что, прежде чем напечатать что-либо, нужно поставить тэг "<html>" в первой строке документа Notepad.

<html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг "</html>" на пару строк ниже и вводите весь текст документа между <html> и </html>.

Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head (<head> и </head>) находятся выше body (<body> и </body>).

Ваш документ теперь должен выглядеть так:

 

<html> <head> </head> <body> </body> </html>

 

Обратите внимание, как мы структурировали тэги по строкам (с помощью клавиши Enter) и какие сделали отступы (клавишей Tab). В принципе не важно, как вы структурируете ваш HTML-документ. Но, для облегчения чтения кода, настоятельно рекомендуем структурировать ваш HTML с помощью перевода строк и отступов, как в нашем примере.

Вы создали базовый шаблон для всех последующих HTML-документ.

 

Обзор тегов HTML

Таким же образом, как вы делали текст жирным шрифтом с помощью тэга <b>, вы можете придать ему характер курсива/italic тэгом <i>. И конечно, "i" это сокращение от "italic".

Пример 1:

 

 

<i>Это должно быть выведено курсивом.</i>

 

Аналогично можно уменьшить размер шрифта тэгом <small>:

Пример 2:

 

 

<small>Это будет выведено уменьшенным шрифтом.</small>

 

Размеры изображения

Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG>. В качестве значений используется пиксел — элементарная точка на мониторе.

Пример 1: Размеры изображения

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100">
</body>
</html>

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

Рамка вокруг изображения

Вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> (пример 9.4). В качестве значения указывается толщина рамки в пикселах.

Пример 1. Добавление рамки вокруг изображения

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100" border="1">
</body>
</html>

 

Поля вокруг изображения

Для любого изображения можно задать пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство.

Пример 2. Добавление отступов вокруг изображения

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" width="50" hspace="10" vspace="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>

 

Выравнивание изображения

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>.

Наиболее популярные параметры — left и right, создающие обтекание вокруг изображения.

Пример 1. Обтекание текста вокруг рисунка

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" hspace="10" vspace="10" width="50">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>

 

1.5 ТАБЛИЦЫ HTML

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

Создание таблиц

Для добавления таблицы на веб-страницу используется тег <TABLE>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD> соответственно. Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега <TD> использовать тег <TH>. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. В остальном, разницы между ячейками, созданными через теги <TD> и <TH>, нет.

Пример 1. Создание таблицы

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<table border="1" width="100%" cellpadding="5">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

</body>
</html>

 

Вид таблицы, полученной в данном примере, показан ниже.

 

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

 

Ячейки формируются по строкам, вначале указывается первая строка, затем вторая и т.д.

Параметры таблиц

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию параметров тегов <TABLE>, <TR> и <TD>. Далее перечислены параметры тега <TABLE>.

ALIGN

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left выравнивание таблицы по левому краю, center по центру и right по правому краю.

BGCOLOR

Устанавливает цвет фона таблицы.

BORDER

Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE>используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.

BORDERCOLOR

Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.

CELLPADDING

Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpadding текст в таблице ?налипает? на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

CELLSPACING

Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.

HEIGHT

Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега <TD>, в противном случае высота вычисляется на основе содержимого таблицы.

WIDTH

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

Параметры ячеек

Каждая ячейка таблицы, задаваемая через тег <TD>, в свою очередь тоже имеет свои параметры, часть из которых совпадает с параметрами тега <TABLE>.

ALIGN

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left ? выравнивание по левому краю, center ? по центру и right ? по правому краю.

BGCOLOR

Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега<TABLE> можно получить разнообразные эффекты в таблице.

BORDERCOLOR

Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.

COLSPAN

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

 

Ячейка 1
Ячейка 2 Ячейка 3

 

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

HEIGHT

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

NOWRAP

Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

ROWSPAN

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

 

Ячейка 1 Ячейка 2
Ячейка 3

 

В данной таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью параметра rowspan.

VALIGN

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре. Возможные значения: top - выравнивание по верхнему краю строки, middle - выравнивание по середине, bottom - выравнивание по нижнему краю, baseline - выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

WIDTH

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

Особенности таблиц

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

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

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

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

Рамка таблицы, в случае добавления параметра border к тегу <TABLE>, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя тем самым эффект трехмерности.

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

 


 

2 ВВЕДЕНИЕ В CSS

Каскадные таблицы стилей / Cascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших web-сайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов. CSS совершенно необходим каждому, работающему с web-дизайном.

2.1 ЧТО ТАКОЕ CSS

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

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет большие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

 

Какие преимущества CSS?

Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:

· управление отображением множества документов с помощью одной таблицы стилей;

· более точный контроль над внешним видом страниц;

· различные представления для разных носителей информации (экран, печать, и т. д.);

· сложная и проработанная техника дизайна.


 

2.2 КАК РАБОТАЕТ CSS

Базовый синтаксис CSS

Скажем, нам нужен красный цвет фона web-страницы:

ВHTMLэто можно сделать так:

 

<body bgcolor="#FF0000">

 

С помощьюCSSтого же самого результата можно добиться так:

 

body {background-color: #FF0000;}

 

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.

 

 

Попытайтесь сделать это сами

Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:

default.htm

<html> <head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Моя первая таблица стилей</h1> </body> </html>

 

 

style.css

body { background-color: #FF0000; }

 

Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")

Откройтеdefault.htmв вашем браузере и вы увидите, что страница имеет красный фон.

2.3 ЦВЕТ И ФОН CSS

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

· color

· background-color

· background-image

· background-repeat

· background-attachment

· background-position

· background

 

Цвет переднего плана : свойство 'color'

Свойство color описывает цвет переднего плана элемента.

Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.

 

h1 {

color: #ff0000;

}

 

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).

 

Свойство 'background-color'

Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.

Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и<h1>.

 

 

body {

background-color: #FFCC66;

}

 

h1 {

color: #990000;

background-color: #FC9804;

}

 

Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.

 

Фоновые изображения [background-image]

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

Ниже мы используем в качестве фонового изображение бабочки. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите "сохранить изображение как/save image as"), либо вы можете использовать другое изображение.

Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.

 

 

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

}

 

h1 {

color: #990000;

background-color: #FC9804;

}

 

NB: Обратите внимание, что мы специфицируем место, где находится файл какurl("butterfly.gif"). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя,например, url("../images/butterfly.gif"), или даже на файлы в Internet, указывая полный адрес файла : url("http://www.html.ru/butterfly.gif").

 

Повторение/мультипликация фонового изображения [background-repeat]

Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.

В таблице указаны четыре значения background-repeat.

Значение Описание
Background-repeat: repeat-x Рисунок повторяется по горизонтали
background-repeat: repeat-y Рисунок повторяется по вертикали
background-repeat: repeat Рисунок повторяется по горизонтали и вертикали
background-repeat: no-repeat Рисунок не повторяется

Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:

 

 

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

}

 

h1 {

color: #990000;

background-color: #FC9804;

}

 

Блокировка фонового изображения [background-attachment]

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

В таблице указаны два значения background-attachment. Щёлкните на примере, чтобы почувствовать разницу между scroll и fixed.

 

Значение Описание
Background-attachment: scroll Изображение прокручивается вместе со страницей - разблокировано
Background-attachment: fixed Изображение блокировано

 

Например, следующий код фиксирует изображение.

 

 

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

}

 

h1 {

color: #990000;

background-color: #FC9804;

}

 

Расположение фонового рисунка [background-position]

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

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:

 

В таблице дано несколько примеров.

Значение Описание
background-position: 2cm 2cm Рисунок расположен на 2 cm слева и на 2 cm сверху
background-position: 50% 25% Рисунок расположен по центру и на четверть экрана сверху
background-position: top right Рисунок расположен в правом верхнем углу страницы

 

 

В примере кода фоновое изображение располагается в правом нижнем углу экрана:

 

 

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

}

 

h1 {

color: #990000;

background-color: #FC9804;

}

 

Сокращённая запись [background]

Свойство background входит в состав всех свойств, перечисленных в этом уроке.

С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.

Например, посмотрите на эти строки:

 

 

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

 

Используя background, того же результата можно достичь одной строкой кода:

 

 

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

 

Порядок свойств этого элемента таков:

[background-color] | [background-image] | [background-repeat] | [background-attachment] |[background-position]

Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:

 

 

background: #FFCC66 url("butterfly.gif") no-repeat;

 

то этим двум не специфицированным свойствам будут присвоены значения по умолчанию - scroll и top left.

2.4 ШРИФТЫ CSS

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

· font-family

· font-style

· font-variant

· font-weight

· font-size

· font

Семейство шрифта [font-family]

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

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name

Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".

Generic family

Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:

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

Список шрифтов может выглядеть так:

 

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

 

 

Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

Стиль шрифта [font-style]

Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2>будут показаны курсивом italic.

 

 

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}

 

Вариант шрифта [font-variant]

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

 

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

 

Вес шрифта [font-weight]

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

 

 

p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

 

Размер шрифта [font-size]

Размер шрифта устанавливается свойством font-size.

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:

 

 

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

 

Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Сокращённая запись [font]

Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле.

Например, вот четыре строки описания свойств шрифта для <p>:

 

 

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

 

Используя сокращённую запись, код можно упростить:

 

 

p {

font: italic bold 30px arial, sans-serif;

}

 

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family


 

4.5 ТЕКСТ CSS

Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:

· text-indent

· text-align

· text-decoration

· letter-spacing

· text-transform

· Отступы [text-indent]

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:

 

 

p {

text-indent: 30px;

}

 

Выравнивание текста [text-align]

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.

В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:

 

 

th {

text-align: right;

}

 

td {

text-align: center;

}

 

p {

text-align: justify;

}

 

Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере<h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.

 

 

h1 {

text-decoration: underline;

}

 

h2 {

text-decoration: overline;

}

 

h3 {

text-decoration: line-through;

}

 

Интервал между буквами [letter-spacing]

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:

 

 

h1 {

letter-spacing: 6px;

}

 

p {

letter-spacing: 3px;

}

 

Трансформация текста [text-transform]

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

capitalize

Капитализирует каждое слово. Например: "john doe" станет "John Doe".

uppercase

Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".

lowercase

Конвертирует все символы в нижний регистр. Например: "JOHN D

Последнее изменение этой страницы: 2016-07-23

lectmania.ru. Все права принадлежат авторам данных материалов. В случае нарушения авторского права напишите нам сюда...