Сегодня мы более подробно остановимся на свойствах контейнеров DIV, и рассмотрим некоторые особенности вставки видео и аудио в статьи.

DIV: Верх, низ, право и лево.

Мы уже знаем, что контейнер DIV -- это такой специальный прямоугольник, в который мы можем поместить некоторое содержимое.
Как у любого прямоугольника, у DIV'a есть верхняя, нижняя, правая и левая границы (top, bottom, right & left).
Мы также знаем, что у DIV'a есть т.н. внутренние и внешние отступы.

Задача: я хочу сделать красивую ссылку на портал Lenta.RU, с которого часто беру новости. Но я хочу, чтобы это была не картинка, а простой текст, который бы вписывался в общую цветовую схему портала.
Итак, я хочу большую надпись "Lenta.RU", отделённую рамочкой, со шрифтом Book Antiqua Italic.

Бла бла бла статья с Lenta.Ru.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.

Lenta.ru

Анализируем.
Мы заключили наш большой прямоугольник прямо в поле LEECH (пользуясь случаем, хочу напомнить уважаемым читателям, что у нас на сайте внешние ссылки оформляются через "золотой ключик"). Т.е. весь DIV является кнопкой-ссылкой.

Мы задали ему свойство float: right, чтобы он висел справа; задали шрифт Book Antiqua или любой с засечками (serif), с большой вертикальной высотой (26px), чтобы сверху и снизу были внутренние отступы. Кроме того, мы отдельно задали верхнюю (border-top) и нижнюю (border-bottom) границы в виде тонких линий толщиной в 1px, цвета #C9C9C9.
Также мы задали внутренние отступы справа и слева (padding-right; padding-left), чтобы верхняя и нижняя линии выходили за ширину надписи.
Свойство "text-decoration: none" убирает нижнее подчёркивание, присущее всем гиперссылкам в шаблоне.

Итак, свойства border, padding и margin могут быть заданы отдельно для верха, низа, правой и левой части контейнера DIV.

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

solid

dotted

dashed

double

groove

ridge

inset

outset

К примеру, я хочу патриотическую двойную границу.


Обращаю Ваше внимание на параметр display: inline-block. Он заставляет блок DIV вести себя подобно изображению IMG: блок растягивается в соответствии со своим содержимым и может быть вписан в текст. Попробуйте использовать DIV без этого параметра, и посмотрите, что получится.
Также обращаю Ваше внимание на толщину границы. Нам нужно минимум 3px, чтобы увидеть границу в ДВЕ линии, иначе они просто сольются.

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

Продолжаем патриотическую тему. Итак, я хочу оформить кусочек текста при помощи орнамента:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui eros, faucibus ac dignissim eget, semper sit amet turpis. Quisque nibh metus, cursus eget malesuada dapibus, mollis eget sem. In id elit purus, ut consequat nulla. Donec quis ipsum quis justo posuere fermentum. Vivamus porta enim non libero dapibus suscipit. Nulla nisl felis, semper ut euismod non, consequat sed leo. Sed ligula nibh, fermentum ut venenatis eget, malesuada vitae lorem. Duis sagittis elementum mattis. Donec rhoncus, ligula non sollicitudin cursus, nisi felis rhoncus lorem, id ornare purus ipsum ac nisl. Cras hendrerit nisi nec nunc sagittis convallis eu non dolor. Nunc fermentum purus ac turpis euismod pharetra.

Etiam iaculis neque semper libero commodo quis elementum sapien ornare. Nullam mattis cursus neque, id ultricies nisl venenatis tincidunt. Duis tempor, nulla vel consectetur ornare, nunc purus volutpat justo, non fringilla risus ligula eget dui. Nullam id nisi vehicula enim cursus ornare. Ut elit purus, tincidunt a cursus consequat, gravida vel eros. Nullam vehicula sagittis dictum. Phasellus id sagittis mauris. Duis venenatis neque ut sem interdum iaculis.

Vivamus quis convallis augue. Cras in cursus ipsum. Curabitur a purus sit amet velit vestibulum pellentesque. Duis tincidunt sapien vel neque fringilla luctus. Mauris sed ligula nisi. Curabitur sodales, lacus in pellentesque fringilla, felis metus mattis neque, vel faucibus nisl tellus eu metus. Donec eu placerat est. Nullam sed sodales dolor. Vestibulum quis sagittis nisl. Praesent eu ante ante. Praesent euismod massa ut libero malesuada blandit. Suspendisse non nisl id justo commodo adipiscing. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut non purus nisl, non commodo mauris. Nunc ac justo iaculis nibh dictum congue sit amet eu urna. Fusce molestie, magna ut dignissim tristique, enim tortor commodo arcu, ut luctus mi turpis sed mi.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin scelerisque auctor vestibulum. In dapibus risus quis dolor porta sollicitudin. Nulla luctus venenatis felis, eget molestie libero faucibus tristique. Vivamus laoreet commodo tellus, quis varius leo bibendum non. In facilisis ultrices lorem, eget venenatis lectus laoreet eu. Nulla tempus auctor varius. Ut adipiscing tellus id risus lobortis faucibus. Maecenas nec ultrices diam. Donec tempor aliquet quam, sed pulvinar nisl commodo at.

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

#FFF8DB -- цвет, сходный с фоновым цветом изображения;
url('http://newzz.in.ua/uploads/posts/2012-07/1341994636_3517-01_big.jpg') -- адрес, откуда брать изображение;
repeat-y -- директива, которая заставляет фоновое изображение повторяться по вертикали.

По умолчанию (без дополнительных директив) изображение повторяется и по вертикали, и по горизонтали. Обращаю Ваше внимание на кавычки при указании адреса изображения.
Внимательный читатель также отметит довольно большой внутренний отступ padding: 5px 5px 5px 115px (т.е. слева). Подобная мера не позволяет тексту внутри DIV'a влезать на фоновое изображение.

Усложним задачку. Я хочу орнамент с двух сторон.

unit Main;

interface

uses
Windows, JMorpheusLib, Messages, SysUtils, Variants, Classes, Graphics,
Controls, Forms, Dialogs, ExtCtrls, StdCtrls;

type
  TMainForm = class(TForm)
    InputFilePath: TEdit;
    Label1: TLabel;
    OpenBtnShape: TShape;
    OpenBtnLabel: TLabel;
    InputFileOpenDialog: TOpenDialog;
    Output: TMemo;
    SaveDialog1: TSaveDialog;
    ConvertBtnShape: TShape;
    SaveBtnShape: TShape;
    ConvertBtnLabel: TLabel;
    SaveBtnLabel: TLabel;
    about: TImage;
    procedure OpenBtnLabelMouseLeave(Sender: TObject);
    procedure OpenBtnLabelMouseEnter(Sender: TObject);

Всё гораздо проще, чем кажется на первый взгляд.
На самом деле, у нас есть внешний DIV, у которого фон повторяется по левой стороне, и второй DIV внутри него. Он содержит текст, и у него фон повторяется по правой стороне: background: white url('http://newzz.in.ua/uploads/posts/2012-07/1341996815_1.png') top right repeat-y.
Настоятельно рекомендую использовать директиву в виде "top right", а не просто "right".

В завершение темы я хотел бы рассказать о таких свойствах контейнера, как overflow и position.
Итак, у нас есть изображение:

Оно довольно большое, и я хочу, чтобы его можно было удобно просматривать.
Делаем DIV размером 720x400, и помещаем в него оригинал нашей картинки:

Да, быть может, пример не самый лучший, но он наглядно демонстрирует работу директивы overflow.
В данном случае мы выставили свойство overflow: auto. Это означает, что, если содержимое DIV'a больше заданных нами ширины и высоты (width: 720px; height: 450px), то у контейнера автоматически появится полоса прокрутки.

Кроме того, существуют опции:
overflow: visible;
-- эта опция позволяет разрешить содержимому выходить за границы контейнера;
overflow: hidden;
-- эта опция позволяет обрезать содержимое границами контейнера;
overflow: scroll;
-- эта опция заставляет контейнер всегда отображать полосы прокрутки.

Замечу, что использование свойства overflow без указания ширины и высоты контейнера -- бесполезно. DIV всё равно растянется так, как ему заблагорассудится.

Директива position позволяет задавать способ позиционирования контейнера или элемента относительно вэб-странички или окна браузера.
Это свойство, как правило, работает в тандеме с директивами top, left, right и bottom, задающими соответствующие координаты.
Существуют следующие опции:
position: absolute;
-- позволяет "поставить" контейнер в любом месте над вэб-страницей. Таким образом в верхней части статьи появился чокнутый смайл.
position: fixed;
-- позволяет "поставить" контейнер в любом месте окна браузера. Таким образом делаются панельки, которые "ездят" вместе с Вами, когда Вы скроллите страницу вверх-вниз.
position: relative;
-- позволяет менять положение контейнера относительно его расположения по умолчанию. Так делаются пьяные шрифты.

Пример кода, сдвигающего надпись на три пикселя вниз относительно исходной позиции:
<span style="position: relative; top: +3px; ">НАДПИСЬ</span>

На этом, пожалуй, рассказ о дивной вёрстке можно завершить.

ВСТАВКА МУЛЬТИМЕДИА.

Как и обещал, отпишу пару слов о приручении таких зверей, как видео и аудио.
Для начала, разберёмся с таким понятием, как прямая ссылка.

Итак, прямой ссылкой на файл является постоянная ссылка интернета, по которой этот самый файл можно скачать.
Это означает, что, если Вы вставите подобную ссылку в адресную строку браузера и запустите -- то сразу начнётся скачивание этого файла.
Не вылезет никаких страничек с кнопкой "Скачать". Не запустится торрент-клиент, чтобы выкачать этот файл.
Нет, браузер СРАЗУ предложит Вам скачать Ваш файл.

Прямые ссылки бывают динамическими. Так, mp3-файлы, хранящиеся в пресловутой социальной сети VK, передаются на компьютер через динамические ссылки, которые со временем меняются.

Нас же интересуют постоянные прямые ссылки, не меняющиеся с течением времени.
При помощи таких ссылок плеер, встроенный в наш сайт (иконки Windows Media Player-a и "mp3" на панели), может "постучаться" на удалённый сервер, забрать оттуда файл, и запустить музыку в нашей статье, другие ссылки он не воспринимает.

Видео и аудио занимает очень большое количество места, поэтому заливать подобные файлы к нам на сервер -- запрещено.
Это означает, что Вам необходимо использовать собственные хостинги, предоставляющие услуги хранения подобного рода информации, с условием ПРЯМОГО ДОСТУПА к файлам.

Если у Вас есть статья с какого-нибудь новостного портала со встроенным в неё видео -- то нельзя просто так взять, и написать-- этот код не отработается, и никакого видео Вы не увидите.

Что же делать?

Существует несколько частных случаев, которые я предлагаю Вам рассмотреть.

Первый частный случай: видео с YouTube.
Ввиду широкого использования данного видеохостинга, на нашем сайте даже представлена кнопка "Tube", посредством которой можно легко вставить видео с "Трубы" в статью. Достаточно просто указать адрес странички, и получить код, вида:Обращаю Ваше внимание на то, что видео ОЧЕНЬ ЖЕЛАТЕЛЬНО центрировать!

При использовании данного способа в статью будет встроен небольшой видеоплеер, проигрывающий Ваше видео с Трубы.
Но нам этого мало, правда?

Способ второй.
Допустим, я не хочу маленький плеер. Я хочу видео на всю страницу.
В этом случае мы лезем под кнопку "Поделиться" => "Сгенерировать HTML-код":


Там мы выбираем интересующий нас размер плеера и, внимание, ставим галочку на пункте "Использовать старый код встраивания".
Копируем сгенерированный код, и вставляем его в свою статью:

И всё бы хорошо, если бы этим можно было ограничиться.

Второй частный случай: видео IFRAME.
Сейчас довольно распространённой стала специфическая вставка видео посредством кода IFRAME.
При этом само видео встраивается вместе с куском вэб-страницы, на котором оно находится.
Так встраиваются новые видео с YouTube, так встраиваются видео с Vimeo и со многих других хостингов.

Код вставки выглядит довольно лаконично:
Однако, есть одно "но". На нашем сайте такой код не работает

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

Главное -- не забываем центрировать видео:
Таким образом можно расправляться с любым IFRAME-кодом.

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

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

Спешу откланяться,


P.s. И да, по всем возникающим вопросам обращаться ко мне (-: