]]>]]>

А пока, продолжаем изучать основные методы оформления текстов с помощью HTML.

Добавляем изображения к своему тексту

Сейчас я покажу, как нужно добавлять картинки.

Вообще WordPress позволяет практически полностью автоматизировать процесс вставки картинок, однако мы всё равно рассмотрим этот процесс более детально.

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

Думаю, что параметры ширина (width) и высота (height) не требуют особого комментария. Параметр border позволяет сделать вокруг картинки рамку указанной толщины.

Для того, чтобы задать некоторый отступ от картинки вы можете указать парметры: hspace (отступ по-горизонтали) и vspace (по вертикали).

Рассмотрим параметр src (путь к файлу). Его нужно указывать полностью. В WordPress'е закачанные файлы по-умолчанию сохраняются в wp-content/upload. Все равно где и как вы храните файлы, главное, чтобы вы правильно указывали к ним путь. Естественно, перед тем, как добавлять картинку к тексту, вы должны загрузить его на сервер.

Загрузка файлов на сервер

Для начала вам нужно подготовить файл на своем компьютере. Это означает, что если у вас очень большая фотография, то было бы неплохо ее уменьшить в размерах и в объеме. Мало кому захочется заходить на сайт, где размещены фотографии по 200-500 Кб. Если вам все же необходимо разместить оригинал, то делается миниатюра - уменьшенная копия, которая ссылается на оригинал.

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

Если же у вас нет желания, возможности или способностей работать с изображениями, то вам придется довольствоваться возможностями WordPress.

Далее речь идет о версии 2.0.3.

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

Для добавления картинки в редактор вам нужно кликнуть на него после чего появится меню.

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

То есть теперь вы можете добавить

• картинку (оригинал),
• только миниатюру,
• миниатюру со ссылокой на оригинал.

Миниатюра со ссылокой на оригинал. Выберите: "Использовать предпросмотр" и "Ссылается на картинку". Пункт меню "Добавить в редактор" поместит готовый код в ваш текст.

Картинка (оригинал). Выберите: "Использовать оригинал" и "Не привязано".

Только миниатюра. Выберите: "Использовать предпросмотр" и "Не привязано".

Закрыть меню можно выбрав "Закрыть опции".

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

Надо сказать, что хоть WordPress и облегчает процедуру добавления картинок, но всё же это примитивный результат. Лучше всего, если вы закачаете файл на сервер, а после поправите HTML-код.

Дополнительные параметры картинок

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

Выравнивание картинки

Существует еще один параметр align, который позволяет выравнивать картинки в тексте. Это несколько сложнее, чем может показаться с первого взгляда. Если вы помните про параметр float (см. предыдущий выпуск), то отчасти эти параметры похожи по своему действию.

Если вы укажите align="left", то картинка окажется слева в текущем (или следующем) абзаце, а текст её будет обтекать справа. Аналогично align="right" - картинка окажется справа, текст - слева.

Существуют и другие возможные значение для align - правда у них не совсем очевидное поведение (middle, top, bottom, absmiddle и т.д). Вы можете поэкспериментировать с этими значениями самостоятельно.

Более сложные примеры стилевой разметки

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

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

Существуют определенные правила, согласно которым каждый HTML-элемент приобретает определенное оформление. Предположим, вы захотите использовать для своего текст темно-синий цвет. Для этого нужно открыть файл style.css и указать для тэга <p> нужный цвет:

Эта запись будет означать, что для всех элементов <p> устанавливать цвет "navy".

Для измненения цвета ссылок можно использовать такой код:

В первой строчке, через запятую указаны элементы для которых устанавливаются эти правила. Это тэг <a> (ссылка) и ее псевдоклассы: ":hover" (возникает в момент, когда курсор находится на ссылке) и "/-:visited-/" (посещенная ссылка). То есть, в нашем случае, для всех ссылок, включая посещенные, устанавливается цвет "red" и без подчеркивания ("text-decoration: none;"). Для ссылок, на которых находится курсор появляется подчеркивание ("underline") и цвет поменяется на "blue".

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

Для этого в css используется наследование. Например:

Это будет означать, что тэг <p>, который находится в элементе content (id="content") будет окрашиваться в черный цвет. А <p>, который находится в элементе menu (id="menu") будет окрашиваться в серый цвет.

Можно указывать и более сложные конструкции:

Это означает, что для элементов списка (<li>), которые находятся в тэге <ul class="cats">, который в свою очередь находится в тэге с id="menu" будет устанавливаться картинка cats_hover.png. Причем это будет происходить только в момент, когда курсор находится над элементом <li> (псевдокласс ":hover").

Правда, если вы пользуетесь IE, то этот пример не сработает, поскольку он не понимет псевдоклассы, кроме как для ссылок.

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

Свои вопросы вы можете задать на форуме - он для этого и предназначен.