26 июля 2006

Выпуск 8. Оформление текстов с помощью HTML (окончание)

Читали 4943 раза
Рубрика: E-mail рассылка
Навигация: Главная » WordPress » E-mail рассылка

Архив рассылки | Форум по WordPress | WordPress 2.0.3 - полностью русская версия

Обновление русского WordPress'а

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

Подробнее...

Бесплатная реклама в рассылке

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

Для этого вы должны прислать мне на e-mail: max-3000###list.ru свою информацию:

Название сайта.
Полный адрес.
От трех до пяти ссылок на материалы вашего блога (ссылка и название).

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

Требования:

Ваш сайт должен работать на WordPress.
Вы должны разместить ссылку на главной странице: http://maxsite.org/ - "Русский WordPress"

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

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

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

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

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

<img src="http://сайт/wp-content/upload/image.jpg" width="200" height="300"
border="1" hspace="3" vspace="4">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<img src="http://сайт/wp-content/upload/image.jpg"
width="200" height="300" alt="Описание картинки"
style="border: 1px solid blue; margin-left: 10px;">

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

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

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

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

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

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

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

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

p {color: navy;}

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

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

a, a:visited {color: red; text-decoration: none;}
a:hover {color: blue; text-decoration: underline;}

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

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

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

#content p {color: black;}
#menu p {color: gray}

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

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

#menu ul.cats li:hover {list-style-image: url(images/cats_hover.png);}

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