@Форум Фантазий

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » @Форум Фантазий » Секреты html и не только » #4 Графика на web-страницах


#4 Графика на web-страницах

Сообщений 1 страница 10 из 167

1

Графика на web-страницах

Лучше всего размещать на сайте картинки форматов gif или jpg. Bmp'шки не рекомендуются из-за своего гигантского размера: чем больше весит картинка, тем дольше она будет загружаться при просмотре ваших страниц, в результате чего гость просто сбежит с вашего сайта или отключит показ картинок в браузере :)

Картинкм вставляются с помощью тега IMG с указанием адреса файла (можно через http) в src:

<img src="images/cat.gif" width=100 height=200>

width - ширина картинки в пикселах;
height - высота картинки в пикселах.

Не забывайте указывать параметры width и height! Это один из способов ускорения загрузки графики.

А еще, для каждой картинки можно прописать alt-текст. В этом случае при наведении мышки на картинку появится всплывающий комментарий. Например:

<img src="images/cat.gif" width=100 height=200 alt="милая киска? :)">

+1

2

Обтекание картинок текстом

Картинку можно расположить слева или справа от текста. За ее расположение отвечает параметр align:

<img src="cat.gif" width=100 height=200 align="right">

right - картинка справа;
left - картинка слева;
bottom - нижняя линия строки текста выравнивается по нижнему краю рисунка;
top - верхняя линия строки текста выравнивается по верху рисунка;
middle или center - строка текста выравнивается по середине рисунка.

Иногда бывает полезно задать поля вокруг картинки. Это делается с помощью параметров hspace и vspace:

<img src="cat.gif" width=100 height=200 align="right" hspace=15 vspace=10>

Разместить картинку по центру можно с помощью тега center:

<center><img src="cat.gif" width=100 height=200> </center>

Не забывайте закрыть тег, иначе вся информация на вашей страничке, идущая после картинки, отцентрируется :)

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

+1

3

И еще, адрес ЛЮБОЙ (почти ;)) картинки в инете можно узнать так:

кликаете правой кнопкой по выбранному изображению на каком-нить сайте и выбираете в открывшемся меню "свойства". Там копируете http-адрес (URL - адрес, если по-правильному) ) Вот и все!

+1

4

Лично я "одалживаю" графику с чужих сайтов таким образом (расскажу обо всех способах, чтоб ничего не забыть). Итак :
Способ первый (самый простой). На нужную нам картинку мы наводим курсор, нажимаем
правую кнопку, выбираем "Сохранить объект как ..." и сохраняем. Этот способ по идее безотказный, но иногда все-таки не работает. Но об этом ниже.

Способ второй (тоже, в принципе, не сложный). Делаем скриншот страницы с нужной нам
картинкой, в PAINT 'е убираем все лишнее. Недостаток - нельзя сохранить анимацию.

Способ третий (опять же не сложный). Этот способ помогает в том случае, если админ сайта, с
которого мы хотим взять картинку, оказался наивным человеком, и попытался защитить свою
графику, заблокировав правую кнопку мышки. Мы же делаем так : наводим курсор на нужную
картинку. В ее левом, верхнем углу должно появится небольшое меню, состоящее из четырех
"картинок-ссылок". Мы выбираем " Сохранение этого изображения "... и все. Картинка у нас в
руках, а точнее у нас в компьютере. Недостаток - этим способом нельзя сохранить анимацию и
картинки небольшого размера.

Способ четвертый ( посложнее). Этот способ подходит тогда, когда не подходят три вышеописанных. Для "одалживания" графики этим способом нам понадобится HTML-код страницы с нужной нам картинкой. Увидеть его можно, если в меню вверху экрана нажать "Вид", а затем "Просмотр HTML-кода". В этом самом HTML - коде мы находим тэг с ссылкой на нужную нам картинку ( что-то вроде <IMG SRC="http://shandor.nm.ru/images/image.gif ">), копируем эту ссылку, вставляем в адресную строку страницы и нажимаем "Переход". Картинка перед вами. Копируем ее первым способом.
Но чаще всего в HTML - код вставляют не всю ссылку, а только ее часть ( в нашем примере это
<IMG SRC="/images/image.gif "> ). Мы же к этой части ссылки (/images/image.gif) прибавляем
адрес сайта (shandor.nm.ru), и уже всю целую ссылку (то есть shandor.nm.ru/images/image.gif)
вставляем опять же в адресную строку сайта, нажимаем "Переход" и так далее. В нашем примере
shandor.nm.ru/images/image.gif - это прямая ссылка на картинку. И наконец

Способ пятый (по идее сложный). На самом деле он не сложный. Помогает он в том
случае, если наш "наивный админ" помимо блокирования правой кнопки мыши, "защитился" еще и
за счет расширения окна во весь экран, то есть меню вверху экрана мы не увидим. Мы же делаем
так : со страницы, на которой находится уже почти наша картинка (для примера эту страницу мы
назовем "страница А"), мы возвращаемся на одну страницу назад (для примера "страницу Б"). На
этой "странице Б" мы наводим курсор на ссылку, через которую мы попадем на "страницу А".
Внизу, в строке статуса браузера, мы увидим ссылку, которая ведет на эту "страницу А". Быстренько запоминаем или записываем эту ссылку, затем вписываем ее уже в адресную строку и нажимаем "Переход". Перед нами появиться "страница А", но уже с меню вверху экрана. Далее поступаем как описано в четвертом способе. Недостаток этого способа в том, что если в строке статуса браузера есть какая нибудь надпись (т.е. например часы или "бегущая строка"), то увидеть ссылку на "страницу А" довольно проблематично.

Вот и все. Копируйте картинки на здоровье, но иногда все же вспоминайте Восьмую Заповедь ...

+1

5

А если вы хотите вставить на страницу вместо картинки какой нибудь flash-исходник, то можно использовать этот тег : <EMBED src="flash.swf " WIDTH="100" HEIGHT="100" ALIGN="ABSMIDDLE">

0

6

Шандор
не ожидала такого...если владелец сайта не хочет давать картинку,так смысл ее воровать-то?
по-моему надо либо договориться НОРМАЛЬНО либо попробовать сделать или найти что-то похожее...

+1

7

Ого!!! Не ожидал! Объясняюсь:
Во первых, и ребенку ясно, что "одалживание" ( я специально взял это слово в кавычки) - это элементарное воровство. И я согласен, что воровать картинки с чужих сайтов не всегда красиво.
Во вторых, у Оленьки в гостевой люди часто спрашивают, как "одалживать" картинки. Вот именно ДЛЯ НИХ я и написал эту небольшую статью. И ИМ решать, воровать картинки, или создавать свои. А если не умеют пока рисовать, то как?
В третьих, как известно, "если нельзя, а очень хочеться, то можно".
В четвертых, в конце я написал о Восьмой Заповеди ( "Не укради" ). Если кто-то боится согрешить, пусть не копирует :)
И наконец, в пятых. Насчет плагиата и "преследуется по закону". Здесь целые сайты копируют и не стыдятся, а по ходу еще и зубы скалят, так что...
P.S. Между прочим, у себя на сайте я разместил папку со всеми картинками и анимацией, которые я использовал при его построении. И ее можно свободно скачать.
P.P.S. Если я кого-то обидел - прошу прощения. Поверьте, я не хотел. И статью я могу удалить, если это нужно. ;)

Отредактировано Шандор (2006-09-15 08:56:01)

0

8

ребят, да успокойтесь вы :) Вам просто рассказали, что есть методы, с помощью которых картинки можно достать. Многие наивно полагают, что правая кнопка спасает.  Вам показали обратное. Лучше скажите Шандору спасибо за предостережение. :)
PS кстати, у многих стоит правая кнопка на чужие картинки. И что их, спрашивается, защищать? если они и не твои вовсе :)
P.p.s ни разу в гостевой у Ольки не видела вопроса об одалживании картинок, кстати.

+1

9

P.p.s ни разу в гостевой у Ольки не видела вопроса об одалживании картинок, кстати.

А я видел, кстати. Поэтому и написал.

0

10

Шандор, ты куда-то не туда смотрел)) Я точно помню, никогда не спрашивали. Спрашивали только скрипт, который запрещает копировать. Скрипт я давала, но предупреждала, что способы достать картинку всегда есть. Только вот о способах не рассказывала. Я рассказывала о способах Защиты))

0


Вы здесь » @Форум Фантазий » Секреты html и не только » #4 Графика на web-страницах