Лекция 1.4. Работа с изображениями — различия между версиями

Материал из Wiki
Перейти к:навигация, поиск
Строка 1: Строка 1:
Изображения
+
В Вики приветствуется размещение изображений на страницах статей. Чтобы украсить свою статью яркой картинкой или подробной схемой, вы должны провести некоторые подготовительные работы.  
В Летописи можно размещать рисунки и фотографии. Изображения внутри Летописи публикуются на тех же правах, что и статьи, в соответствии со схемой лицензирования GFDL.  
 
  
На страницах Летописи.ру можно использовать фотографии учеников, на которые вами было получено письменное согласие их родителей.
+
Загружать файлы могут только зарегистрированные участники.  
 
 
Пользователи других сайтов! Не копируйте фотографии детей, размещенные на страницах Летописи.ру.
 
 
 
 
 
Да и зачем вам фотографии чужих детей?
 
  
 +
На страницах Вики можно использовать фотографии учеников, на которые вами было получено письменное согласие их родителей.
  
 +
== Вставка без изменения размеров ==
 +
Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: <nowiki>[[Изображение:Файл]]</nowiki>.
  
 +
«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его на странице, то поставьте двоеточие перед словом «Изображение»: [[:Изображение:Файл]]. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: Изображение:Wiki logo.png.
 +
== Пояснительная подпись ==
 +
Чтобы сделать поясняющую подпись, используется атрибут «frame»: [[Изображение:Wiki.png|frame|Пояснительная подпись]]
 +
Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку.
 
   
 
   
Публикация фотографий и личной информации детей
+
== Уменьшение размеров ==
 +
Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (в формате ЧИСЛОрх). Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «thumb»:
  
--------------------------------------------------------------------------------
+
[[Изображение:MediaWik.png|100px|Альтернативный текст для изображений]]
 +
 
 +
Атрибут «thumb», вставленныё между именем файла и пояснительной подписью, уменьшает ширину изображения (в зависимости от настроек пользователя — от 120px до 300px; высота изменяется пропорционально), прижимает его вправо и помещают в рамку:
  
"Публикация в Интернете фотографий, снятых на камерафон или цифровую фотокамеру, осуществляется просто и быстро. При публикации в Интернете фотографии очень сложно предотвратить ее распространение, изменение и использование в различных контекстах. Копии фотографий могут легко оказаться в нескольких местах, и их полное удаление может оказаться очень трудным делом. Дважды подумайте, прежде чем опубликовать личную информацию вместе с фотографией.  
+
[[Изображение:MediaWik.png|thumb|Пояснительная подпись]]
 
+
Кроме того, справа от пояснительной подписи появляется специальный значок: щёлкнув по нему, можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от значка.  
Публикация чьей-либо фотографии или другой личной информации, например, на веб-сайте школы, подразумевает разглашение личной информации, что всегда требует согласия данного человека."
 
  
 +
Не забывайте о соразмерности изображения и текста. Если статья небольшая, то можно подобрать высоту изображения так, чтобы текст полностью охватывал его. В длинной статье не стоит делать изображения чрезмерно маленькими, иначе они «утонут» в тексте.
  
  
Из нормативных актов о "точке доступа" к сети Интернет (они есть в каждой школе!!!)
+
== Расположение на странице ==
 
 
--------------------------------------------------------------------------------
 
 
 
2.13. Принципы размещения информации на интернет-ресурсах ОУ призваны обеспечивать:
 
-соблюдение действующего законодательства Российской Федерации, интересов и прав граждан;
 
-защиту персональных данных обучающихся, преподавателей и сотрудников;
 
-достоверность и корректность информации.
 
2.14. Персональные данные обучающихся (включая фамилию и имя, класс/год обучения, возраст, фотографию, данные о месте жительства, телефонах и пр., иные сведения личного характера) могут размещаться на интернет-ресурсах, создаваемых ОУ, только с письменного согласия родителей или иных законных представителей обучающихся.
 
Персональные данные преподавателей и сотрудников ОУ размещаются на его интернет-ресурсах только с письменного согласия лица, чьи персональные данные размещаются.
 
2.15. В информационных сообщениях о мероприятиях, размещенных на сайте ОУ без уведомления и получения согласия упомянутых лиц или их законных представителей, могут быть указаны лишь фамилия и имя обучающегося либо фамилия, имя и отчество преподавателя, сотрудника или родителя.
 
2.16. При получении согласия на размещение персональных данных представитель ОУ обязан разъяснить возможные риски и последствия их опубликования. ОУ не несет ответственности за такие последствия, если предварительно было получено письменное согласие лица (его законного представителя) на опубликование персональных данных. 
 
Какие изображения МОЖНО загружать в проект Летопись.ру
 
Изображения и фотографии являются объектом авторского права, и копирайт распространяется на них по умолчанию. Это означает, что вы можете разместить изображение в только в следующих случаях:
 
 
 
если Вы являетесь его автором и согласны с распространением своего произведения под приведенной выше лицензией;
 
если изображение является всеобщим достоянием;
 
если изображение распространяется под какой-либо свободной лицензией;
 
если автор изображения явно дал право всем желающим на его свободное распространение и изменение;
 
если вы получили согласие автора на использование изображения в любых, в том числе коммерческих целях;
 
допускается размещать скриншоты, снятые с программных продуктов, кадры из кинофильмов, изображения денежных знаков и остальные изображения, использование которых может быть трактовано как добросовестное использование .
 
 
   
 
   
НЕ РАЗМЕЩАЙТЕ ИЗОБРАЖЕНИЯ, АВТОРСТВО И УСЛОВИЯ РАСПРОСТРАНЕНИЯ, КОТОРЫХ ВЫ НЕ ЗНАЕТЕ!
 
(Это требование обусловлено вступлением в силу 4-й части Гражданского Кодекса РФ. Любые иные варианты размещения чреваты серьезными юридическими неприятностями.
 
  
Статья 1255 (Гражданский кодекс Российской Федерации от 18 декабря 2006 г. N 230-ФЗ Часть четвертая). Авторские права)
+
== Смещение вправо ==
 
ГЛАВНЫЕ ПРАВИЛА
 
Если вы хотите добавить изображение к своей статье, то сделайте цифровую фотографию или рисунок и разместите внутри летописи. Изображение может разместить только авторизованный автор летописи - см. Регистрация участников. Для этого у него в левой колонке - инструменты есть специальная команда - Загрузить файл.
 
Назовите свой графический файл уникальным именем. Это позволит Вам найти его и уберечь от перезаписи. См. печальная судьба файла 111.jpg. Внимание! Перед загрузкой изображения в Летописи всегда проверяйте его имя на "оригинальность"! НЕ оставляйте имя файла, взятое с цифровых камер, например, DS2035578056!
 
И в тексте статей, и в описании фотографии используйте категории. Это позволит быстро находить нужный материал. Например, [[Категория:Изображения:Школа]], [[Категория:Изображения:Портреты]]
 
Обсуждение изображений, если они связаны с основным текстом статьи, как, например, в случае дискуссии о типе танка Т-34, см.Памятник Героям Воинам добровольческого танкового корпуса (Пермь), лучше проводить в "Обсуждение:Статья", а не в "Обсуждение:Изображение".
 
Формат изображений - jpg или png. Фотографии - Jpg. Рисунки - png.
 
Старайтесь, чтобы размеры уменьшенной копии изображения, используемой в статье, не превышали 150 Кб. Не делайте фотографии размером больше, чем 800 на 600 точек. Главное в статье - текст!
 
Не перегружайте свои статьи изображениями. Если их у Вас много, оставьте на странице статьи 3-4, остальные разместите, например, в веб-альбоме на Пикаса, сделав ссылку.
 
Приветствуется использование изображений, которые уже есть в нашей базе изображений летописи
 
Для каждого изображения имеется страница с его описанием, которую нужно заполнить. Cледует записать в обязательном порядке 1) краткое описание изображения, 2) автора фотографии или источник (при сканировании), вид лицензии (при копировании), 3) категорию
 
Желательно включать загруженные изображения в специальные категории, входящие в иерархию категорий. Названия таких категорий обязательно начинаются с префикса «Изображения:» — см.например, Категория:Изображения:Портреты.
 
Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: [[Изображение:Файл]] или использовать кнопку -  - вставка изображения.
 
 
   
 
   
Вставка без изменения размеров
 
Изображение:Герб СВГ.gif
 
 
«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его на странице, то поставьте двоеточие перед словом «Изображение»: [[:Изображение:Файл]]. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: Изображение:кафе для влюблённых.jpg.
 
 
Пояснительная подпись
 
Изображение:Герб СВГ.gif
 
Герб г.Советская Гавань, Хабаровский крайЧтобы сделать поясняющую подпись, используется атрибут «frame»: [[Изображение:Fish-pie.jpg|frame|Пояснительная подпись]]
 
Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку.
 
 
 
Другим вариантом для подписи к изображению является использование таблицы с class-атрибутом «rimage»:
 
 
Изображение:Герб СВГ.gif 
 
Герб г.Советская Гавань, Хабаровский край 
 
{| class=rimage
 
|[[Изображение:Fish-pie.jpg]]
 
|-
 
|''Подпись под изображением.''
 
|}Как и атрибут «frame», этот атрибут создаёт рамку вокруг изображения, прижимает всю таблицу вправо, но, кроме того, ещё и центрирует подпись. Такая подпись не используется в качестве альтернативного текста для изображения, поэтому его можно задать отдельно.
 
 
 
Уменьшение размеров
 
 
Рыбный пирог ПоветлужскийАтрибуты «thumb» или «thumbnail», вставленные между именем файла и пояснительной подписью, уменьшают ширину изображения (в зависимости от настроек пользователя — от 120px до 300px; высота изменяется пропорционально), прижимают его вправо и помещают в рамку:
 
 
[[Изображение:Fish-pie.jpg|thumb|Пояснительная подпись]]
 
Кроме того, справа от пояснительной подписи появляется специальный значок: щёлкнув по нему, можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от значка.
 
 
 
Рыбный пирог ПоветлужскийДля получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселях (в формате ЧИСЛОрх). Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «thumb»:
 
 
[[Изображение:Fish-pie.jpg|100px|Альтернативный текст для изображений]]
 
Или
 
 
[[Изображение:Fish-pie.jpg|thumb|100px|Пояснительная подпись]]
 
Можно вписать изображение в прямоугольник заданного размера, указав его ширину и высоту:
 
 
[[Изображение:Fish-pie.jpg|thumb|200x100px|Пояснительная подпись]]
 
Отношение сторон изображения (ширины к высоте) при этом не изменяется. Иными словами, когда пропорции изображения не совпадают с пропорциями заданного прямоугольника, тогда либо высота, либо ширина уменьшенного изображения окажется меньше заданной для прямоугольника. Поэтому, если необходимо задать именно высоту изображения (и дать ему пропорционально растянуться по ширине), то для этого достаточно сделать ширину описанного прямоугольника заведомо большей, нежели высота : 30000x200px, например.
 
 
Не забывайте о соразмерности изображения и текста. Если статья небольшая, то можно подобрать высоту изображения так, чтобы текст полностью охватывал его. В длинной статье не стоит делать изображения чрезмерно маленькими, иначе они «утонут» в тексте.
 
 
Расположение на странице
 
Смещение вправо
 
 
Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «right». Пример:  
 
Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно атрибутом «right». Пример:  
  
[[Telenok.jpg|150px|right|]]  
+
[[MediaWik.png|100px|right|]]  
  
 
Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «|» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения.  
 
Текст, следующий за таким изображением, обтекает его слева. Не забудьте поставить вертикальную чёрточку «|» после слова «right»: это нужно для того, чтобы оно не воспринималось как альтернативный текст для изображения.  
Строка 115: Строка 39:
 
В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример:  
 
В отличие от изображения с атрибутом «frame» или «thumb», в данном случае изображение не оказывается заключённым в рамку, и альтернативный текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать альтернативный текст после атрибута «right», за вертикальной чёрточкою. Пример:  
  
[[Изображение:Telenok.jpg|150px|right|Пояснительная подпись]]  
+
[[Изображение:MediaWik.png|100px|right|Пояснительная подпись]]  
 +
 
  
  
 +
== Смещение влево ==
 
   
 
   
ТелёнокСмещение влево
 
 
Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» или «none». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример:  
 
Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» или «none». Это работает в том числе и для изображений с атрибутом «frame» или «thumb». Пример:  
  
[[Изображение:Telenok.jpg|150px|thumb|left|Пояснительная подпись]]  
+
[[Изображение:MediaWik.png|100px|thumb|left|Пояснительная подпись]]  
  
 
Текст, следующий за таким изображением, обтекает его справа.  
 
Текст, следующий за таким изображением, обтекает его справа.  
Строка 129: Строка 54:
  
  
Окончание обтекания  
+
 
 +
== Окончание обтекания ==
 +
 
Для пометки окончания обтекающего изображение текста используйте специальный HTML-код:  
 
Для пометки окончания обтекающего изображение текста используйте специальный HTML-код:  
  
Строка 136: Строка 63:
 
Текст, расположенный после этого кода, будет начинаться с новой строки — и будет располагаться ниже нижнего края любого из изображений, расположенных прежде этого кода в статье.  
 
Текст, расположенный после этого кода, будет начинаться с новой строки — и будет располагаться ниже нижнего края любого из изображений, расположенных прежде этого кода в статье.  
  
Расположение по центру  
+
 
 +
== Расположение по центру ==
 +
 
Для расположения изображения в центре страницы следует использовать атрибут «center». Пример:  
 
Для расположения изображения в центре страницы следует использовать атрибут «center». Пример:  
  
[[Изображение:Telenok.jpg|150px|thumb|center|Пояснительная подпись]]  
+
[[Изображение:MediaWik.png|100px|thumb|center|Пояснительная подпись]]  
  
 
   
 
   
Телёнок
+
Пояснительная подпись
 
Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения.  
 
Текст, следующий за таким изображением, не обтекает его ни с одной из сторон, а начинается ниже нижнего края изображения.  
  
Дополнительные возможности  
+
 
Галереи  
+
== Дополнительные возможности ==
 +
 +
 
 +
== Галереи ==
 +
 
Для вставки нескольких изображений в статью (например, изображений картин в статье о художнике), применяется специальный служебный тег <gallery>, который группирует изображения в галерею (по 4 изображения в каждом ряду).  
 
Для вставки нескольких изображений в статью (например, изображений картин в статье о художнике), применяется специальный служебный тег <gallery>, который группирует изображения в галерею (по 4 изображения в каждом ряду).  
  
Строка 152: Строка 85:
  
 
<gallery>
 
<gallery>
Изображение:Telenok.jpg|Теленок
+
Изображение:wiki.png
Изображение:Petuh-eliz.jpg|Курицы
+
Изображение:wiki.png|Подпись
Изображение:Ovcy-eliz.jpg|Овцы
+
Изображение:wiki.png|Подпись с [[Заглавная страница|ссылкой]]
Изображение:Gusik-eliz.jpg|Гуси
 
 
</gallery>
 
</gallery>
 
Теленок
 
 
   
 
   
Курицы
+
Подпись
 
   
 
   
Овцы
+
Подпись с ссылкой
 
Гуси
 
 
   
 
   
  
Пример более изощрённого синтаксиса.  
+
Пример более изощерённого синтаксиса.  
  
 
<gallery caption='Можно добавлять заголовки'>
 
<gallery caption='Можно добавлять заголовки'>
 
Также можно вставлять текст
 
Также можно вставлять текст
  
Изображение:Telenok.jpg|Теленок
+
Изображение:Opochka1.jpg|Участники тренинга
Изображение:Petuh-eliz.jpg|Курицы
+
Изображение:Opochka2.jpg|Работа в группах
Изображение:Ovcy-eliz.jpg|Овцы
+
Изображение:Opochka3.jpg
 
</gallery>
 
</gallery>
Моё подворье! Также можно вставлять текст
 
Теленок
 
 
Курицы
 
 
Овцы
 
 
 
Пошаговая инструкция "Вставка изображения на вики-страницу"
 
 
"Исключение" из правил
 
В Летописи можно размещать рисунки и фотографии уже загруженные в Интернет на другие сайты. Эти изображения внутри Летописи будут работать в формате [[Изображение: Файл]] без дополнительных возможностей. См. Сетевые архивы изображений
 
 
Эти изображения можно добавлять, как обычную правку текста.
 
Если вы хотите добавить такое изображение к своей статье, то выбрав изображение по ссылке свойства рисунка, копируете его прямой адрес и просто вставляете.
 
Это изображение добавлено этим способом:
 
 
 
 
http://www.pazitiv.com/ts/12/1179738694.jpg
 
 
Размещение на странице
 
Сдвиг вправо:
 
 
 
 
<p align=right>Адрес изображения</p>
 
 
По центру:
 
 
 
<center>Адрес изображения</center>
 
 
Одно неудобство, текс изображение не обрамляет.
 
  
Положительные стороны – экономия времени, простота добавления, лёгкость удаления ….
+
 
  
Отрицательные стороны - ……….
 
  
Данное «исключение» не действует в Википедии, ……
 
  
Действует в Летописи.ру, ХабаВики,СарВики ПскоВики, …..
 
 
   
 
   
  

Версия 12:44, 27 апреля 2009

В Вики приветствуется размещение изображений на страницах статей. Чтобы украсить свою статью яркой картинкой или подробной схемой, вы должны провести некоторые подготовительные работы.

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

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

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

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

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

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

Чтобы сделать поясняющую подпись, используется атрибут «frame»:

Файл:Wiki.png
Пояснительная подпись

Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять вики-разметку.

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

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

Альтернативный текст для изображений

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

Файл:MediaWik.png
Пояснительная подпись

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

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


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

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

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

100px|right|

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

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


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

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

Файл:MediaWik.png
Пояснительная подпись

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



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

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


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


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

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

Файл:MediaWik.png
Пояснительная подпись


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


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

Галереи

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

Подпись

Подпись с ссылкой


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




ПОБРОБНЕЕ СМОТРИ в ВикиХранилище