В интернете получили распространение в основном два типа картинок. Это картинки GIF (имеют расширение .gif) и картинки JPEG (имеют расширение .jpg или .jpeg). Поэтому желательно использовать картинки этих двух типов на страницах своих сайтов. Картинки других типов могут отображаться не во всех броузерах. Для заливки картинки на сайт её сначала надо сохранить на своём компьютере.
Для вставки изображения на страницу сайта ucoz есть несколько способов. Рассмотрим основные из них.
1]Загрузка картинки через форму загрузки изображений.
Форма загрузки изображений есть во всех контент-модулях uCoz. Найти ее нетрудно: она под полем добавления текста страницы под названием "Изображения" (см. п.1 на рис.1).
В этом способе нет возможности прописывать атрибуты ALT и TITLE для изображения, которые важны для поисковых систем. Он используется если мало времени или не важна поисковая оптимизация при добавлении изображения.
С помощью этой функции вы сможете прикрепить изображение к тексту страницы:
- открываем страницу сайта, на которую устанавливаем изображение;
- для выбора изображения, размещённого на вашем ПК, нужно щёлкнуть по кнопке "Обзор"(п.2 на рис.1);
- в открывшемся диалоговом окне выбрать файл устанавливаемого изображения и нажать в том окне кнопку "Открыть", при этом должен отобразиться код <$IMAGE$> (п.3) устанавливаемого изображения;
- поле (п.4) указывает путь до выбранной картинки на вашем компьютере;
- кнопка (п.5) поможет добавить ещё одно поле для добавления изображения
(нужно знать, что максимальный размер каждого загружаемого изображения 2 000 килобайт (почти 2 мегабайта) и то, что к одной странице можно прикрепить максимум 20 изображений);
- система автоматически будет уменьшать большие изображения до установленных вами размеров (п.6); при этом, нажав на изображение, посетитель сможет увидеть его в полном размере;
- скопировать код <$IMAGE$> (п.3) устанавливаемого изображения и разместить его в "Поле текста страницы" (п.7);
Заливку картинок на сайт uCoz через файловый менеджер могут осуществлять как администраторы, так и пользователи сайта (по усмотрению админа). После авторизации вы попадаете на главную страницу сайта. Наиболее простой вариант доступа к файловому менеджеру - через кнопку "Управление" админбара, при нажатии на которую открывается окно с перечнем функций, среди которых и "Файловый менеджер" (рис.2).
Открываете его и загружаете картинку с вашего компьютера в какую либо папку файлового менеджера. К примеру, выбираете папку "Bunin" (рис.3), щёлкаете по ней левой кнопкой мышки, а в открывшемся окне - по кнопке "Выберите файл" (рис.4).
Рис.2 Рис.3 Рис.4
В новом окне на своём ПК находите папку с нужным изображением (к примеру изображение Photo2.jpg в папке "Photo" на диске"D:"), выделяете его левой кнопкой мышки и щёлкаете по кнопке "Открыть" (рис.5).
Открывается окно, аналогичное изображённому на рис.4, но уже в поле кнопки "Выберите файл" прописан путь к выбранному изображению (Photo2.jpg), и появился пунктик "Поставить водяной знак (watermark) на изображение" (рис.6) Если "водяной знак" на изображении вам не нужен - снимаете галочку в этом пунктике, и нажимаете кнопку "Загрузить файл" (см. примечание).
По окончании загрузки изображения открывается окно папки "Bunin" с файлом Photo2.jpg (21.22 Kb) - рис.7
Рис.5 Рис.6 Рис.7
В графе "Действие" в строке "Photo2.jpg" (рис.7) расположены пять значков. Назначение каждого из них появляется при подведении указателя мышки к соответствующему значку (рис.8).
Рис.8
Для загрузки изображения (файл Photo2.jpg - рис.7) на сайт необходим его HTML-код, для извлечения которого нажимаем кнопку "Ссылка к файлу" (рис.8), и в открывшемся окне копируем код картинки (рис.9), вставляем его в "Поле текста страницы" (п.8 рис.10) и нажимем кнопку "Сохранить".
Примечание:
- можно одновременно загрузить ещё несколько изображений (файлов), нажав на зелёный знак "плюс" рядом с кнопкой "Загрузить файл" (рис.11);
- можно загрузить изображения (файлы) не только со своего ПК, но и из интернета, поставив галочку в окошечке левее зелёного знака "плюс", и введя соответствующую ссылку в открывшееся новое поле вместо поля "Выберите файл" (рис.12).
Рис.11 Рис.12
3]Обтекание картинки текстом.
а) Загрузка изображения в визуальном редакторе uCoz.
Напомним, что в визуальном редакторе uCoz есть кнопка (иконка) "Изображение" (7 или 11), при нажатии на которую появляется одноименное диалоговое окно - рис.13
Рис.13
В верхнем поле "Путь" необходимо указать путь к картинке - её web-адрес.
Если картинка находится на другом ресурсе или на компьютере пользователя, то её необходимо предварительно загрузить в файловый менеджер (см. предыдущий раздел "Загрузка изображения через файловый менеджер"). Затем щелчком по строке выбранного изображения (к примеру по Photo2.jpg - рис.7) автоматом возвращаемся в окно «Изображение» с уже заполненным полем "Путь".
Если загрузка изображения производится из интернета (с помощью его адреса), то этот URL-адрес изображения следует скопировать в поле "Путь".
Во второй строке (рис.13) указывается название, которое будет служить alt-тегом картинки.
В третьей строке в выпадающем списке «Выравнивание» выбирается вариант обтекания текстом вставленного изображения. Установим "Выравнивание вправо". Выбранный вариант выравнивания отображается в нижней части окна.
Кнопка 'граница' позволяет выбрать рамку изображения (тип, толщину, цвет)
В полях «Ширина» и «Высота» можно задать в пикселах размеры изображения, с которыми оно отобразится на странице. Если оставить поля пустыми, рисунок отобразится в полном размере. Мы же сократим размер рисунка вдвое и зададим значения 150 х 90 рх.
В правой части диалогового окна в полях "Вверх", "Низ", "Влево", "Вправо" можно установить отступы текста страницы от изображения. Установим в этих полях значение 10. Графика введённых отступов отображается в нижней части окна. В итоге получаем оформленное окно "Изображение" - рис.14
Рис.14
В этом окне нажимаем кнопку "Вставить", затем кнопку «Сохранить» в нижней части окна редактора uCoz и получаем результат в виде фото 3 в "Примере вставок изображений"
http://elislav.my1.ru/Bunin/ris.13.jpg - URL-адрес картинки, загруженной через файловый менеджер;
alt="Porsche 911 Carrera" -атрибут alt устанавливает альтернативный текст для изображений;
align="right" - выравнивание картинки вправо от текста;
width="150" height="90" - горизонтальный и вертикальный размеры картинки;
style="margin: 10px 10px 10px 10px" - отступы текста (вверх-вправо-вниз-влево) от изображения в пикселях.
Таким образом, для того, чтобы вставить картинку (в том числе и уменьшенного размера) в нужное место текста, достаточно иметь лишь её URL-адрес; остальные же параметры кода (размер картинки, отступы и пр.) задаются по усмотрению автора.
Более того, немного видоизменив HTML-код, можно создавать превью изображения с обтеканием его текстом, что бывает необходимо при наполнении сайтов контентом (при размещении на сайте статей и т.п.). Код достаточно прост и интуитивно понятен даже пользователям, лишь постигающим азы HTML:
Вторая часть этого кода - копия Кода 1 (изменены лишь URL-адрес - другая картинка - и значение тега align с "right" на "left"), а атрибут href в первой части кода задает адрес оригинала изображения.
Плюсы кода не только в удобстве вставки превью картинки в текст, но и в простоте создания превью, минуя хостингы изображений типа radikal.ru, не отличающихся надёжность показов.
Пример вставки превью изображения с обтеканием его текстом показан на фото 4 в "Примере вставок изображений"
4]Создаём превью изображения с помощью сайта Радикал-фото
- Входим на сайт Радикал-фото и на открывшейся панели выставляем нужные опции - Рис.15
- Нажав кнопку "Выберите файл" (Рис.15), в диалоговом окне ПК выбираем нужный файл картинки, которую хотим переписать со своего компьютера на сайт - Photo3, и нажимаем там кнопку "Открыть" - Рис.16
- На панели Радикал-фотонажимаем кнопку "Загрузить" - Рис.17
Рис.15 Рис.16 Рис.17
- После загрузки изображения на панели из списка ссылок выбираем нужный нам вариант загрузки данного изображения на сайт: положим, нам нужно добавить на сайт превью (увеличение изображения по клику) в HTML-коде. Тогда нам подойдёт вариант 7 - "HTML: превью - увеличение по клику" - Рис.18
- Если в дальнейшем на увеличенной картинке превью мы не желаем, наряду с изображением, иметь ещё и фон страницы Радикал-фото, то ссылку для загрузки выберем иначе.
- Обратимся к окну "Коды" и нажмём в нём кнопку "Переход с превью" и выбираем вариант "На графический файл" - Рис.19
- В открывшемся окне выбираем тот же вариант 7 - "HTML: превью - увеличение по клику", выделяем получившуюся ссылку и в контекстном меню выбираем "Копировать" - Рис.20
Рис.18 Рис.19 Рис.20
- После этого вставляем скопированную ссылку в выбранное место страницы сайта, и получаем превью – уменьшенную копию изображения, при клике по которой открывается полноразмерная версия изображения - фото 5 в "Примере вставок изображений"
BMW M3 CSL // BMW M3, Porsche 911 Carrera. "Автопанорама”
Фото 1 Фото 2
BMW М3 в версии CSL не только легче, но и мощнее, и он просто обречен на успех.
Чувствую себя, как баранья отбивная, которую хорошо прожарили с двух сторон до золотистой корочки.
Только в роли гриля выступает крыша BMW М3 CSL: она сделана из углепластика и не окрашена. Конструкторы использовали этот материал, чтобы выиграть в весе.
По той же причине они отказались от теплошумоизоляции потолка. Когда температура окружающего воздуха достигает 35°С, крыша BMW М3 CSL нагревается, как сковорода. Инженеры М-отделения концерна BMW добились от двигателя нового CSL впечатляющих 360 л.с., но в тесном моторном отсеке ему очень жарко. Перегородка между моторным отсеком и салоном не является преградой для выделяемого тепла, и мои ноги поджариваются во время движения. А еще один "способ борьбы” с лишним весом - отсутствие кондиционера!
как вариант - можно воспользоваться сторонним хостингом изображений, типа http://pipel.org/image/ залили, получили код на картинку, вставили... всё просто
Ответ: elislav Об этом см. п.4 "Создаём превью изображения с помощью сайта Радикал-фото". Но... сторонние хостинги не всегда надёжны, часто дают сбои. Уж если здесь речь идёт о "Загрузке изображений на сайт uCoz ", то проще пользоваться именно хостингом uCoz через файловый менеджер сайта. Тогда оптимальный вариант (для обтекания картинки текстом) - "Универсальный код для загрузки изображений" (см. п.3b).
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
Чувствую себя, как баранья отбивная, которую хорошо прожарили с двух сторон до золотистой корочки.
Только в роли гриля выступает крыша BMW М3 CSL: она сделана из углепластика и не окрашена. Конструкторы использовали этот материал, чтобы выиграть в весе.
