Создание сайта в программе FrontPage. Вставка изображений на сайт

Путь для вставки рисунка из файла

Одним из приемов улучшения восприятия текста является применение иллюстраций. Да и вообще, сайт выглядит намного лучше, если на нем есть хотя бы несколько картинок. Но тут возникает вопрос: где же эти картинки взять? Здесь все зависит от того, какую тематику вы собираетесь иллюстрировать. Определились с тематикой — заходите на специализированные сайты и вводите свой запрос. Самый быстрый способ!

Cамый сложный способ — это нарисовать картинку самому, в каком-нибудь графическом редакторе. Это уже высший пилотаж! Если у вас есть сканер, тогда вы можете «реальные» изображения превратить в «виртуальные». Можно даже самому нарисовать что-нибудь на бумаге, с помощью сканера перенести на компьютер — и ни у кого больше такой картинки не будет!

Согласитесь, на начальном этапе намного проще нарисовать что-то на бумаге, чем в графическом редакторе. Правда, и это требует определенных способностей… Но их же можно развить! Не забывайте, чтобы что-то найти или создать, нужно в первую очередь представлять, что именно вам нужно. «Наугад» или «авось повезет» — это тоже способ, но срабатывает он достаточно редко. Так что сначала придумайте, четко представьте, что именно вам нужно, — и пожалуйста, ищите, творите!

После того как вы отобрали нужные изображения, переместите их в папку images, предварительно дав им названия, чтобы потом в них не запутаться. Если вы решили взять какие-то изображения из галерей картинок в Интернете, то необходимо переименовать изображения. Ведь многие картинки имеют названия типа «E098gH», неужели это удобно? Поэтому вместо такого сложного названия напишите другое, которое будет более удобно вам. Например, если это «E098gH» — цветок, его можно переименовать в «cvetok» или если вы более или менее владеете английским — «flower» или, для краткости — «fl» :). И не забывайте, вам же будет удобней, если названия будут написаны с маленькой буквы.

Для вставки я выбрала вот такую картинку:

бабочка на цветке Изображение для вставки на страницуИзображение для вставки на страницу

Называется она «бабочка на цветке». Теперь нужно определить место для вставки картинки. Определили. Я выбрала место под основным текстом на главной странице.

Устанавливаем курсор на выбранном месте и переходим к самой ответственно части — собственно вставке картинки. Для этого в командной строке нужно выбрать Вставка (Insert) | Рисунок (Image) | Из файла (From the file).

В открывшемся окне должно появиться содержание папки в которой находится ваш сайт, то есть папки site. А в папке site мы создали еще одну папку — images. Помните? Вот в ней и находится заветная картинка для вставки. Выберите папку images, а в ней нужное вам изображение. Нажмите ОК и любуйтесь результатом 🙂

Результат после вставки изображения на страницуРезультат после вставки изображения на страницу

А теперь давайте посмотрим, какие свойства есть у нашего изображения. Выделите картинку, затем нажмите правую кнопку мыши и выберите из открывшегося меню пункт Свойства рисунка (Image Properties). Чтобы сократить эти действия, можно просто нажать <Alt>+<Enter>.

Диалоговое окно Свойства рисункаДиалоговое окно Свойства рисунка

Выберите вкладку Общие. Внимательно посмотрите на путь (URL) к данному рисунку — images/flower.gif. Мое изображение называется «flower» и имеет формат GIF, поэтому полное название будет flower.gif. И находится оно, как вы видите, в папке images.

Я не просто так говорила: «Создайте специальную папочку, перенесите туда свои изображения, а потом уже вставляйте… «. Итак, если вы все правильно сделали, путь к рисунку будет именно: images/your_picture.gif. Он обязательно должен начинаться на images(если ваша папка с рисунками называется так)! Если же вы решили не создавать отдельную папку специально для изображений (а зря!) и решили все складывать в одну кучу в папку site, у вас будет указан несколько другой путь, а именно flower.gif (это имя моего изображения, у вас оно может быть совершенно другим).

А если же путь в указан совершенно другой, например, начинается с «C:Documents and SettingsMy directory…», то вы явно сделали что-то не то. А если путь к картинке будет указан неверно, то после размещении сайта в Интернете она просто не будет отображаться. Но не расстраивайтесь, на ошибках учатся, попробуйте сделать все еще раз.

И не в коем случае не останавливайтесь! Самое сложное — это начать, сделать первые шаги. А вы их уже сделали! Так что, отступать поздно, придется довести это дело до конца :).

Обратите внимание на группу Альтернативные представления. Первым пунктом идет Низкое разрешение. Дело в том, что у многих пользователей скорость доступа в Интернет очень мала. И если ваше изображение имеет большой объем, такие пользователи могут просто уйти из сайта, не дождавшись полной загрузки. Для этого и нужен файл низкого разрешения. Первым делом загрузится этот файл, а уже после него — само изображение. Но имейте в виду, что такой файл нужно еще и создать. А в строке Низкое разрешение указать путь к нему.

Следующий пункт — Текст. Рядом находится пустое поле. Если туда ввести текст, он потом будет отображаться при наведении курсора мыши на рисунок. Рядом с рисунком будет появляться прямоугольник, а в нем — ваш текст!

Это очень полезная функция, советую ею воспользоваться. Обычно комментарии к рисунку пишут под ним, а тут можно эти комментарии поместить прямо в рисунок!

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

Вид страницы с отключенной графикойВид страницы с отключенной графикой