Идентификация элемента с помощью id

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

Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибутclass. Теперь взглянем на пример использования id:

<h1>Глава 1</h1>

...

<h2>Глава 1.1</h2>

...

<h2>Глава 1.2</h2>

...

<h1>Глава 2</h1>

...

<h2>Глава 2.1</h2>

...

<h3>Глава 2.1.2</h3>

...

Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:

<h1 id="c1">Глава 1</h1>

...

<h2 id="c1-1">Глава 1.1</h2>

...

<h2 id="c1-2">Глава 1.2</h2>

...

<h1 id="c2">Глава 2</h1>

...

<h2 id="c2-1">Глава 2.1</h2>

...

<h3 id="c2-1-2">Глава 2.1.2</h3>

...

Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:

#c1-2 {

color: red;

}

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

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

Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.

В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.

· Группирование с помощью <span>

· Группирование с помощью <div>

Группирование с помощью <span>

Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.

Пример - цитата из Бенджамина Франклина:

<p>Кто рано ложится и рано встаёт,
тот будет здоровым, богатым и умным</p>

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

<p>Кто рано ложится и рано встаёт,
тот будет <span class="benefit">здоровым</span>,
<span class="benefit">богатым</span>
и <span class="benefit">умным</span>.</p>

В CSS:

span.benefit {

color:red;

}

Разумеется, вы можете также использовать id для определения стиля <span>-элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх <span>-элементов, как мы говорили в прошлом уроке.

Группирование с помощью <div>

В то время как <span> используется в элементах уровня блока, как в предыдущем примере,<div> применяется для группирования одного или более блок-элементов.

Кроме этого отличия, группирование с помощью <div> работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:

<div id="democrats">

<ul>

<li>Франклин Д. Рузвелт</li>

<li>Гарри Трумэн</li>

<li>Джон Ф. Кеннеди</li>

<li>Линдон Б. Джонсон</li>

<li>Джимми Картер</li>

<li>Билл Клинтон</li>

</ul>

</div>

<div id="republicans">

<ul>

<li>Дуайт Д. Эйзенхауэр</li>

<li>Ричард Никсон</li>

<li>Джэралд Форд</li>

<li>Роналд Рейган</li>

<li>Джордж Буш</li>

<li>Джордж У. Буш</li>

</ul>

</div>

В нашей таблице стилей мы можем использовать такое же группирование, как и раньше:

#democrats {

background:blue;

}

#republicans {

background:red;

}

В этих примерах мы использовали <div> и <span> для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как.... Однако это - не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике.

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

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

Эта иллюстрация может показаться слишком научной, поэтому попытаемся использовать эту модель на конкретном примере с заголовком и текстом. HTML нашего примера таков (из Всеобщей Декларации Прав Человека):

Добавив цвет и информацию шрифта этот пример можно представить так:

В этом примере - два элемента : <h1> и <p>. Боксовая модель этих элементов выглядит так:

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

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

В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами margin и padding.

· Установим поля элемента

· Установим заполнение элемента

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа).

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

CSS-код для этого примера выглядит так:

Или вы можете написать более элегантно:

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

Установим заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.

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

Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:

2.11 РАМКИ CSS

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

· border-width

· border-color

· border-style

· Примеры определения рамок

· border

Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки [border-color]

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок [border-style]

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для <h1>, <h2>, <ul> и <p>. Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

h1 {

border-width: thick;

border-style: dotted;

border-color: gold;

}

h2 {

border-width: 20px;

border-style: outset;

border-color: red;

}

p {

border-width: 1px;

border-style: dashed;

border-color: blue;

}

ul {

border-width: thin;

border-style: solid;

border-color: orange;

}

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

}

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

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

можно объединить в:

p {

border: 1px solid blue;

}

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

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

· width

· height

Установка ширины [width]

Свойством width вы можете определять ширину элемента.

В примере показан бокс для ввода текста:

div.box {

width: 200px;

border: 1px solid black;

background: orange;

}

Установка высоты [height]

Обратите внимание, как, в предыдущем примере, высота бокса устанавливается содержимым этого бокса. Высоту элемента можно определить свойством height. В качестве примера попытаемся создать бокс высотой 500px:

div.box {

height: 500px;

width: 200px;

border: 1px solid black;

background: orange;

}

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

Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса).

Принципы показаны на рисунке:

Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:

Как это сделать?

HTML-код для этого примера:

<div id="picture">

<img src="bill.jpg" alt="Bill Gates">

</div>

<p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:

#picture {

float:left;

width: 100px;

}

Ещё пример: колонки

Поплавки/Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами <div> таким образом:

<div id="column1">

<p>Haec disserens qua de re agatur

et in quo causa consistat non videt...</p>

</div>

<div id="column2">

<p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

</div>

<div id="column3">

<p>nam nihil esset in nostra

potestate si res ita se haberet...</p>

</div>

Теперь необходимую ширину колонок установим, например, 33%, а затем установим всплывание каждой влево в свойстве float:

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

#column3 {

float:left;

width: 33%;

}

float может иметь значения left, right или none.

Свойство clear

Свойство clear управляет поведением последовательностью всплывающих элементов документа.

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

Свойство clear может иметь значения left, right, both или none. Принцип таков, что еслиclear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.

<div id="picture">

<img src="bill.jpg" alt="Bill Gates">

</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:

#picture {

float:left;

width: 100px;

}

.floatstop {

clear:both;

}

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

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

· Принципы CSS-позиционирования

· Абсолютное позиционирование

· Относительное позиционирование

Принципы CSS-позиционирования

Представим окно браузера как систему координат:

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

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

Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:

Вот результат:

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

Абсолютное позиционирование

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

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.

В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

}

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

}

#box4 {

position:absolute;

bottom: 50px;

left: 50px;

}

Относительное позиционирование

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

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

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

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

#dog3 {

position:relative;

left: 50px;

bottom: 700px;

}

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

CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.

Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с большим номером перекрывает элемент с меньшим номером.

Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:

При этом номера идут подряд (1-5), но того же результата можно добиться и при использовании 5 различных номеров. Важна хронологическая последовательность номеров (порядок).

Код примера с картами:

#ten_of_diamonds {

position: absolute;

left: 100px;

top: 100px;

z-index: 1;

}

#jack_of_diamonds {

position: absolute;

left: 115px;

top: 115px;

z-index: 2;

}

#queen_of_diamonds {

position: absolute;

left: 130px;

top: 130px;

z-index: 3;

}

#king_of_diamonds {

position: absolute;

left: 145px;

top: 145px;

z-index: 4;

}

#ace_of_diamonds {

position: absolute;

left: 160px;

top: 160px;

z-index: 5;

}

Это относительно простой метод, но в нём заложены большие возможности. Вы можете размещать текст над изображением, изображение над текстом и т. д.

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

CMS Drupal - это система управления контентом (Content management system) с открытым исходным кодом которая распространяется под лицензией GPL. Говоря простым языком это гибкая и мощная система позволяющая создавать как мелкие сайты (сайты визитки, блоги, информативные сайты) так и крупные многофункциональные сайты (интернет-магазины, порталы, организационные сайты и т.д.) не требуя при этом глубоких познаний в области PHP, MySQL, CSS, HTML.

Drupal это CMS с открытым исходным кодом, то есть абсолютно бесплатная, также бесплатными являются все модули расширяющие функционал сайта и темы оформления. Официальный сайт Drupal - drupal.org, на нем можно найти и скачать огромное количество модулей и тем оформления.

Основные составляющие Drupal

Ядро (Core)

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

Модули (Modules)

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