Форматирование изображения

Материал из ТолВИКИ
(Различия между версиями)
Перейти к: навигация, поиск
(Новая: Загружать файлы могут только '''зарегистрированные участники'''. === Вставка без изменения размеров === Ч...)
 
Строка 1: Строка 1:
 +
__NOTOC__
 
Загружать файлы могут только '''зарегистрированные участники'''.
 
Загружать файлы могут только '''зарегистрированные участники'''.
 +
 
=== Вставка без изменения размеров ===
 
=== Вставка без изменения размеров ===
 
Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: '''<nowiki>[[Изображение:Файл]]</nowiki>'''.
 
Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: '''<nowiki>[[Изображение:Файл]]</nowiki>'''.
  
[[Изображение:Wiki logo.png]]
+
[[Изображение:Pazl.jpg]]
  
«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его на странице, то поставьте двоеточие перед словом «Изображение»: <nowiki>[[:Изображение:Файл]]</nowiki>. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: [[:Изображение:Wiki logo.png]].
+
«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его на странице, то поставьте двоеточие перед словом «Изображение»: <nowiki>[[:Изображение:Файл]]</nowiki>. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: [[:Изображение:Pazl.jpg]].
  
 
=== Пояснительная подпись ===
 
=== Пояснительная подпись ===
 
{|
 
{|
|[[Изображение:Wiki.png|frame|Пояснительная подпись]]
+
|[[Изображение:Pazl.jpg|frame|Пояснительная подпись]]
 
Чтобы сделать поясняющую подпись, используется атрибут «'''frame'''»:
 
Чтобы сделать поясняющую подпись, используется атрибут «'''frame'''»:
<nowiki>[[Изображение:Wiki.png|frame|Пояснительная подпись]]</nowiki><br />
+
<nowiki>[[Изображение:Pazl.jpg|frame|Пояснительная подпись]]</nowiki><br />
 
Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку.  
 
Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку.  
 
|}
 
|}
 
Другим вариантом для '''подписи к изображению''' является использование таблицы с class-атрибутом «'''rimage'''»:
 
Другим вариантом для '''подписи к изображению''' является использование таблицы с class-атрибутом «'''rimage'''»:
 
{| class=rimage
 
{| class=rimage
|[[Изображение:Wiki.png]]
+
|[[Изображение:Pazl.jpg]]
 
|-
 
|-
 
|''Подпись под''
 
|''Подпись под''
Строка 22: Строка 24:
 
|}
 
|}
 
<pre><nowiki>{| class=rimage
 
<pre><nowiki>{| class=rimage
|[[Изображение:Wiki.png]]
+
|[[Изображение:Pazl.jpg]]
 
|-
 
|-
 
|''Подпись под изображением.''
 
|''Подпись под изображением.''
Строка 29: Строка 31:
  
 
=== Уменьшение размеров ===
 
=== Уменьшение размеров ===
[[Изображение:MediaWik.png|thumb|Пояснительная подпись]]
+
[[Изображение:Pazl.jpg|thumb|Пояснительная подпись]]
  
 
Атрибуты «'''thumb'''» или «'''thumbnail'''», вставленные между именем файла и пояснительной подписью, уменьшают ширину изображения (в зависимости от настроек пользователя — от 120px до 300px; высота изменяется пропорционально), прижимают его вправо и помещают в рамку:
 
Атрибуты «'''thumb'''» или «'''thumbnail'''», вставленные между именем файла и пояснительной подписью, уменьшают ширину изображения (в зависимости от настроек пользователя — от 120px до 300px; высота изменяется пропорционально), прижимают его вправо и помещают в рамку:
  
: '''<nowiki>[[Изображение:MediaWik.png|thumb|Пояснительная подпись]]</nowiki>'''
+
: '''<nowiki>[[Изображение:Pazl.jpg|thumb|Пояснительная подпись]]</nowiki>'''
  
 
Кроме того, справа от пояснительной подписи появляется специальный значок: щёлкнув по нему, можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от значка.
 
Кроме того, справа от пояснительной подписи появляется специальный значок: щёлкнув по нему, можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от значка.
  
[[Изображение:MediaWik.png|100px|thumb|Пояснительная подпись]]
+
[[Изображение:Pazl.jpg|100px|thumb|Пояснительная подпись]]
 
Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (в формате ''ЧИСЛО''рх). Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «thumb»:
 
Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (в формате ''ЧИСЛО''рх). Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «thumb»:
: '''<nowiki>[[Изображение:MediaWik.png|100px|Альтернативный текст для изображений]]</nowiki>'''
+
: '''<nowiki>[[Изображение:Pazl.jpg|100px|Альтернативный текст для изображений]]</nowiki>'''
  
 
Или
 
Или
  
: '''<nowiki>[[Изображение:MediaWik.png|thumb|100px|Пояснительная подпись]]</nowiki>'''
+
: '''<nowiki>[[Изображение:Pazl.jpg|thumb|100px|Пояснительная подпись]]</nowiki>'''
  
 
Можно вписать изображение в прямоугольник заданного размера, указав его ширину и высоту:
 
Можно вписать изображение в прямоугольник заданного размера, указав его ширину и высоту:
  
: '''<nowiki>[[Изображение:MediaWik.png|thumb|200x100px|Пояснительная подпись]]</nowiki>'''
+
: '''<nowiki>[[Изображение:Pazl.jpg|thumb|200x100px|Пояснительная подпись]]</nowiki>'''
  
 
Отношение сторон изображения (ширины к высоте) при этом не изменяется. Иными словами, когда пропорции изображения не совпадают с пропорциями заданного прямоугольника, тогда либо высота, либо ширина уменьшенного изображения окажется меньше заданной для прямоугольника. Поэтому, если необходимо задать именно ''высоту'' изображения (и дать ему пропорционально растянуться по ширине), то для этого достаточно сделать ширину описанного прямоугольника заведомо большей, нежели высота : '''30000x200px''', например.
 
Отношение сторон изображения (ширины к высоте) при этом не изменяется. Иными словами, когда пропорции изображения не совпадают с пропорциями заданного прямоугольника, тогда либо высота, либо ширина уменьшенного изображения окажется меньше заданной для прямоугольника. Поэтому, если необходимо задать именно ''высоту'' изображения (и дать ему пропорционально растянуться по ширине), то для этого достаточно сделать ширину описанного прямоугольника заведомо большей, нежели высота : '''30000x200px''', например.
Строка 54: Строка 56:
  
 
=== Расположение на странице ===
 
=== Расположение на странице ===
[[Изображение:MediaWik.png|100px|right|Пояснительная подпись]]
+
[[Изображение:Pazl.jpg|100px|right|Пояснительная подпись]]
 
==== Смещение вправо ====
 
==== Смещение вправо ====
 
Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «'''right'''». Пример:
 
Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «'''right'''». Пример:
  
<code><nowiki>[[MediaWik.png|100px|right|]]</nowiki></code>
+
<code><nowiki>[[Pazl.jpg|100px|right|]]</nowiki></code>
  
 
Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «'''&#124;'''» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения.
 
Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «'''&#124;'''» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения.
Строка 64: Строка 66:
 
В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример:
 
В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример:
  
<code><nowiki>[[Изображение:MediaWik.png|100px|right|Пояснительная подпись]]</nowiki></code>
+
<code><nowiki>[[Изображение:Pazl.jpg|100px|right|Пояснительная подпись]]</nowiki></code>
  
<br clear="both" />[[Изображение:MediaWik.png|100px|thumb|left|Пояснительная подпись]]
+
<br clear="both" />[[Изображение:Pazl.jpg|100px|thumb|left|Пояснительная подпись]]
  
 
==== Смещение влево ====
 
==== Смещение влево ====
 
Чтобы прижать изображение к левому краю страницы, используйте атрибут «'''left'''» или «'''none'''». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример:
 
Чтобы прижать изображение к левому краю страницы, используйте атрибут «'''left'''» или «'''none'''». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример:
  
<code><nowiki>[[Изображение:MediaWik.png|100px|thumb|left|Пояснительная подпись]]</nowiki></code>
+
<code><nowiki>[[Изображение:Pazl.jpg|100px|thumb|left|Пояснительная подпись]]</nowiki></code>
  
 
Текст, следующий за таким изображением, обтекает его справа.
 
Текст, следующий за таким изображением, обтекает его справа.
Строка 87: Строка 89:
 
Для расположения изображения в центре страницы следует использовать атрибут «'''center'''». Пример:
 
Для расположения изображения в центре страницы следует использовать атрибут «'''center'''». Пример:
  
<code><nowiki>[[Изображение:MediaWik.png|100px|thumb|center|Пояснительная подпись]]</nowiki></code>
+
<code><nowiki>[[Изображение:Pazl.jpg|100px|thumb|center|Пояснительная подпись]]</nowiki></code>
[[Изображение:MediaWik.png|100px|thumb|center|Пояснительная подпись]]
+
[[Изображение:Pazl.jpg|100px|thumb|center|Пояснительная подпись]]
  
 
Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения.
 
Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения.
Строка 99: Строка 101:
 
<pre>
 
<pre>
 
<gallery>
 
<gallery>
Изображение:wiki.png
+
Изображение:Pazl.jpg
Изображение:wiki.png|Подпись
+
Изображение:Pazl.jpg|Подпись
Изображение:wiki.png|Подпись с [[Заглавная страница|ссылкой]]
+
Изображение:Pazl.jpg|Подпись с [[Заглавная страница|ссылкой]]
 
</gallery>
 
</gallery>
 
</pre>
 
</pre>
 
<gallery>
 
<gallery>
Изображение:wiki.png
+
Изображение:Pazl.jpg
Изображение:wiki.png|Подпись
+
Изображение:Pazl.jpg|Подпись
Изображение:wiki.png|Подпись с [[Заглавная страница|ссылкой]]
+
Изображение:Pazl.jpg|Подпись с [[Заглавная страница|ссылкой]]
 
</gallery>
 
</gallery>
 
Пример более изощерённого синтаксиса.
 
Пример более изощерённого синтаксиса.
Строка 114: Строка 116:
 
Также можно вставлять текст
 
Также можно вставлять текст
  
Изображение:Opochka1.jpg|Участники тренинга
+
Изображение:Pazl.jpg|Участники тренинга
Изображение:Opochka2.jpg|Работа в группах
+
Изображение:Pazl.jpg|Работа в группах
Изображение:Opochka3.jpg
+
Изображение:Pazl.jpg
 
</gallery>
 
</gallery>
 
</pre>
 
</pre>
Строка 122: Строка 124:
 
Также можно вставлять текст
 
Также можно вставлять текст
  
Изображение: Opochka1.jpg|Участники тренинга
+
Изображение: Pazl.jpg|Участники тренинга
Изображение: Opochka2.jpg|Работа в группах
+
Изображение: Pazl.jpg|Работа в группах
Изображение: Opochka3.jpg
+
Изображение: Pazl.jpg
 
</gallery>
 
</gallery>
 
----
 
----
 
''При написании этой статьи использовался материал из [http://ru.wikipedia.org/wiki/Заглавная_страница ВикипедиИ — проекта свободной многоязычной энциклопедии].''
 
''При написании этой статьи использовался материал из [http://ru.wikipedia.org/wiki/Заглавная_страница ВикипедиИ — проекта свободной многоязычной энциклопедии].''

Версия 10:20, 25 октября 2007

Загружать файлы могут только зарегистрированные участники.

Вставка без изменения размеров

Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: [[Изображение:Файл]].

Pazl.jpg

«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его на странице, то поставьте двоеточие перед словом «Изображение»: [[:Изображение:Файл]]. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: Изображение:Pazl.jpg.

Пояснительная подпись

Пояснительная подпись

Чтобы сделать поясняющую подпись, используется атрибут «frame»: [[Изображение:Pazl.jpg|frame|Пояснительная подпись]]
Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку.

Другим вариантом для подписи к изображению является использование таблицы с class-атрибутом «rimage»:

Pazl.jpg
Подпись под

изображением.

{| class=rimage
|[[Изображение:Pazl.jpg]]
|-
|''Подпись под изображением.''
|}

Как и атрибут «frame», этот атрибут создаёт рамку вокруг изображения, прижимает всю таблицу вправо, но, кроме того, ещё и центрирует подпись. Такая подпись не используется в качестве альтернативного текста для изображения, поэтому его можно задать отдельно.

Уменьшение размеров

Пояснительная подпись

Атрибуты «thumb» или «thumbnail», вставленные между именем файла и пояснительной подписью, уменьшают ширину изображения (в зависимости от настроек пользователя — от 120px до 300px; высота изменяется пропорционально), прижимают его вправо и помещают в рамку:

[[Изображение:Pazl.jpg|thumb|Пояснительная подпись]]

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

Пояснительная подпись

Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (в формате ЧИСЛОрх). Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «thumb»:

[[Изображение:Pazl.jpg|100px|Альтернативный текст для изображений]]

Или

[[Изображение:Pazl.jpg|thumb|100px|Пояснительная подпись]]

Можно вписать изображение в прямоугольник заданного размера, указав его ширину и высоту:

[[Изображение:Pazl.jpg|thumb|200x100px|Пояснительная подпись]]

Отношение сторон изображения (ширины к высоте) при этом не изменяется. Иными словами, когда пропорции изображения не совпадают с пропорциями заданного прямоугольника, тогда либо высота, либо ширина уменьшенного изображения окажется меньше заданной для прямоугольника. Поэтому, если необходимо задать именно высоту изображения (и дать ему пропорционально растянуться по ширине), то для этого достаточно сделать ширину описанного прямоугольника заведомо большей, нежели высота : 30000x200px, например.

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

Расположение на странице

Пояснительная подпись

Смещение вправо

Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «right». Пример:

[[Pazl.jpg|100px|right|]]

Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «|» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения.

В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример:

[[Изображение:Pazl.jpg|100px|right|Пояснительная подпись]]


Пояснительная подпись

Смещение влево

Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» или «none». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример:

[[Изображение:Pazl.jpg|100px|thumb|left|Пояснительная подпись]]

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


Окончание обтекания

Для пометки окончания обтекающего изображение текста используйте специальный HTML-код:

<br clear="both" />

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

Расположение по центру

Для расположения изображения в центре страницы следует использовать атрибут «center». Пример:

[[Изображение:Pazl.jpg|100px|thumb|center|Пояснительная подпись]]

Пояснительная подпись

Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения.

Дополнительные возможности

Галереи

Для вставки нескольких изображений в статью (например, изображений картин в статье о художнике), применяется специальный служебный тег <gallery>, который группирует изображения в галерею (по 4 изображения в каждом ряду).

В простейшем случае используется следующий синтаксис.

<gallery>
Изображение:Pazl.jpg
Изображение:Pazl.jpg|Подпись
Изображение:Pazl.jpg|Подпись с [[Заглавная страница|ссылкой]]
</gallery>

Пример более изощерённого синтаксиса.

<gallery caption='Можно добавлять заголовки'>
Также можно вставлять текст

Изображение:Pazl.jpg|Участники тренинга
Изображение:Pazl.jpg|Работа в группах
Изображение:Pazl.jpg
</gallery>

При написании этой статьи использовался материал из ВикипедиИ — проекта свободной многоязычной энциклопедии.

Личные инструменты
наши друзья
http://аудиохрестоматия.рф/