Лекция 1.4. Работа с изображениями — различия между версиями
Admin (обсуждение | вклад) |
Admin (обсуждение | вклад) |
||
Строка 1: | Строка 1: | ||
− | + | В Вики приветствуется размещение изображений на страницах статей. Чтобы украсить свою статью яркой картинкой или подробной схемой, вы должны провести некоторые подготовительные работы. | |
− | В | ||
− | + | Загружать файлы могут только зарегистрированные участники. | |
− | |||
− | |||
− | |||
− | |||
− | |||
+ | На страницах Вики можно использовать фотографии учеников, на которые вами было получено письменное согласие их родителей. | ||
+ | == Вставка без изменения размеров == | ||
+ | Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: <nowiki>[[Изображение:Файл]]</nowiki>. | ||
+ | «По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его на странице, то поставьте двоеточие перед словом «Изображение»: [[:Изображение:Файл]]. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: Изображение:Wiki logo.png. | ||
+ | == Пояснительная подпись == | ||
+ | Чтобы сделать поясняющую подпись, используется атрибут «frame»: [[Изображение:Wiki.png|frame|Пояснительная подпись]] | ||
+ | Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку. | ||
− | + | == Уменьшение размеров == | |
+ | Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (в формате ЧИСЛОрх). Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «thumb»: | ||
− | + | [[Изображение:MediaWik.png|100px|Альтернативный текст для изображений]] | |
+ | |||
+ | Атрибут «thumb», вставленныё между именем файла и пояснительной подписью, уменьшает ширину изображения (в зависимости от настроек пользователя — от 120px до 300px; высота изменяется пропорционально), прижимает его вправо и помещают в рамку: | ||
− | + | [[Изображение:MediaWik.png|thumb|Пояснительная подпись]] | |
− | + | Кроме того, справа от пояснительной подписи появляется специальный значок: щёлкнув по нему, можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от значка. | |
− | |||
+ | Не забывайте о соразмерности изображения и текста. Если статья небольшая, то можно подобрать высоту изображения так, чтобы текст полностью охватывал его. В длинной статье не стоит делать изображения чрезмерно маленькими, иначе они «утонут» в тексте. | ||
− | + | == Расположение на странице == | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | == Смещение вправо == | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «right». Пример: | Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «right». Пример: | ||
− | [[ | + | [[MediaWik.png|100px|right|]] |
Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «|» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения. | Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «|» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения. | ||
Строка 115: | Строка 39: | ||
В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример: | В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример: | ||
− | [[Изображение: | + | [[Изображение:MediaWik.png|100px|right|Пояснительная подпись]] |
+ | |||
+ | == Смещение влево == | ||
− | |||
Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» или «none». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример: | Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» или «none». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример: | ||
− | [[Изображение: | + | [[Изображение:MediaWik.png|100px|thumb|left|Пояснительная подпись]] |
Текст, следующий за таким изображением, обтекает его справа. | Текст, следующий за таким изображением, обтекает его справа. | ||
Строка 129: | Строка 54: | ||
− | Окончание обтекания | + | |
+ | == Окончание обтекания == | ||
+ | |||
Для пометки окончания обтекающего изображение текста используйте специальный HTML-код: | Для пометки окончания обтекающего изображение текста используйте специальный HTML-код: | ||
Строка 136: | Строка 63: | ||
Текст, расположенный после этого кода, будет начинаться с новой строки — и будет располагаться ниже нижнего края любого из изображений, расположенных прежде этого кода в статье. | Текст, расположенный после этого кода, будет начинаться с новой строки — и будет располагаться ниже нижнего края любого из изображений, расположенных прежде этого кода в статье. | ||
− | Расположение по центру | + | |
+ | == Расположение по центру == | ||
+ | |||
Для расположения изображения в центре страницы следует использовать атрибут «center». Пример: | Для расположения изображения в центре страницы следует использовать атрибут «center». Пример: | ||
− | [[Изображение: | + | [[Изображение:MediaWik.png|100px|thumb|center|Пояснительная подпись]] |
− | + | Пояснительная подпись | |
Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения. | Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения. | ||
− | Дополнительные возможности | + | |
− | Галереи | + | == Дополнительные возможности == |
+ | |||
+ | |||
+ | == Галереи == | ||
+ | |||
Для вставки нескольких изображений в статью (например, изображений картин в статье о художнике), применяется специальный служебный тег <gallery>, который группирует изображения в галерею (по 4 изображения в каждом ряду). | Для вставки нескольких изображений в статью (например, изображений картин в статье о художнике), применяется специальный служебный тег <gallery>, который группирует изображения в галерею (по 4 изображения в каждом ряду). | ||
Строка 152: | Строка 85: | ||
<gallery> | <gallery> | ||
− | Изображение: | + | Изображение:wiki.png |
− | Изображение: | + | Изображение:wiki.png|Подпись |
− | Изображение: | + | Изображение:wiki.png|Подпись с [[Заглавная страница|ссылкой]] |
− | |||
</gallery> | </gallery> | ||
− | |||
− | |||
− | + | Подпись | |
− | + | Подпись с ссылкой | |
− | |||
− | |||
− | Пример более | + | Пример более изощерённого синтаксиса. |
<gallery caption='Можно добавлять заголовки'> | <gallery caption='Можно добавлять заголовки'> | ||
Также можно вставлять текст | Также можно вставлять текст | ||
− | Изображение: | + | Изображение:Opochka1.jpg|Участники тренинга |
− | Изображение: | + | Изображение:Opochka2.jpg|Работа в группах |
− | Изображение: | + | Изображение:Opochka3.jpg |
</gallery> | </gallery> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ||
− | |||
− | |||
− | |||
Версия 12:44, 27 апреля 2009
В Вики приветствуется размещение изображений на страницах статей. Чтобы украсить свою статью яркой картинкой или подробной схемой, вы должны провести некоторые подготовительные работы.
Загружать файлы могут только зарегистрированные участники.
На страницах Вики можно использовать фотографии учеников, на которые вами было получено письменное согласие их родителей.
Содержание
Вставка без изменения размеров
Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: [[Изображение:Файл]].
«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его на странице, то поставьте двоеточие перед словом «Изображение»: Изображение:Файл. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: Изображение:Wiki logo.png.
Пояснительная подпись
Чтобы сделать поясняющую подпись, используется атрибут «frame»:
Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку.
Уменьшение размеров
Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (в формате ЧИСЛОрх). Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «thumb»:
Альтернативный текст для изображений
Атрибут «thumb», вставленныё между именем файла и пояснительной подписью, уменьшает ширину изображения (в зависимости от настроек пользователя — от 120px до 300px; высота изменяется пропорционально), прижимает его вправо и помещают в рамку:
Кроме того, справа от пояснительной подписи появляется специальный значок: щёлкнув по нему, можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от значка.
Не забывайте о соразмерности изображения и текста. Если статья небольшая, то можно подобрать высоту изображения так, чтобы текст полностью охватывал его. В длинной статье не стоит делать изображения чрезмерно маленькими, иначе они «утонут» в тексте.
Расположение на странице
Смещение вправо
Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «right». Пример:
Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «|» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения.
В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример:
Смещение влево
Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» или «none». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример:
Текст, следующий за таким изображением, обтекает его справа.
Окончание обтекания
Для пометки окончания обтекающего изображение текста используйте специальный HTML-код:
Текст, расположенный после этого кода, будет начинаться с новой строки — и будет располагаться ниже нижнего края любого из изображений, расположенных прежде этого кода в статье.
Расположение по центру
Для расположения изображения в центре страницы следует использовать атрибут «center». Пример:
Пояснительная подпись
Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения.
Дополнительные возможности
Галереи
Для вставки нескольких изображений в статью (например, изображений картин в статье о художнике), применяется специальный служебный тег
- , который группирует изображения в галерею (по 4 изображения в каждом ряду).
- В простейшем случае используется следующий синтаксис.
- Wiki.png
- Wiki.png
Подпись
- Wiki.png
Подпись с ссылкой
Подпись
Подпись с ссылкой
Пример более изощерённого синтаксиса.
- Также можно вставлять текст
- Opochka1.jpg
Участники тренинга
- Opochka2.jpg
Работа в группах
- Opochka3.jpg
ПОБРОБНЕЕ СМОТРИ в ВикиХранилище