Использование изображений

Рис. 9. Примеры размещения изображений на странице с использованием средств HTML

    • Border thickness . При значении, отличном от нуля, изображения определяется рамкой. Значение поля определяет толщину линий этой рамки в пикселях. Изображение с гиперссылками обрамляются рамкой синего цвета, другие изображения — черного цвета.
    • Horizontal spacing . Это поле позволяет настраивать расстояние (в пикселях) между изображением и другими элементами строки.
    • Vert ical spacing . Позволяет настраивать расстояние между изображением и другими элементами страницы по вертикали (например, между изображением и строками сверху и снизу).
  • Size . Эта группа элементов управления определяет размер графического изображения отображается.
    • Spe cify size . При установке этого флажка будут использоваться не начальные размеры изображения, а указанные вами.
    • Width . Определяет размер пространства по горизонтали, браузер зарезервирует под изображение. Значение можно указывать как в пикселях, так и в процентах (установив соответствующий переключатель).
    • Height . Определяет размер пространства по вертикали, браузер зарезервирует под изображение. Значение можно указывать как в пикселях, так и в процентах (установив соответствующий переключатель).
    • Keep aspect ratio . При установке этого флажка изменение ширины изображения приведет к изменению высоты, и наоборот (так, чтобы пропорции изображения были сохранены).
Проблемы обычно возникают с размещением изображения на странице.
Видеонаблюдение купить

Как видно на рис. 8, большинство вариантов размещения изображения, при которой изображение располагается на строке, приводит к тому, что расстояние между строками искажается. Это редко приводит к улучшению восприятия страницы. Поэтому на практике чаще всего используются значения Left и Right. Они по крайней мере привязывают изображения к абсолютному ориентира (левом или правом границы окна) и позволяют сохранить обычную расстояние между строками. Чтобы разместить изображение по центру, его нужно поместить в отдельный абзац. После этого можно будет воспользоваться любым из следующих способов:

  • можно выделить абзац и воспользоваться кнопкой Center в панели инструментов Text;
  • можно щелкнуть по абзацу правой кнопкой мыши, в контекстном меню выбрать Paragraph Properties, а затем в поле Paragraph Alignment выбрать Center.
По умолчанию большинство браузеров считывает информацию о все изображения на странице и выделяет под них пространство, основываясь на их начальном размере. Есть по крайней мере три причины, по которым вы можете отменить использование такого подхода и указать пространство отводится под изображение вручную
  1. при использовании подхода к размещению изображения по умолчанию браузер не может предоставить область под изображения, пока он не получит достаточно информации об изображении для определения его размеров. В результате задерживается размещения (и отображение) и других элементов страницы. Если вы указываете размер изображения в коде HTML, отображение других элементов страницы будет проводиться быстрее;
  2. иногда вам может понадобиться сделать изображение больше или меньше его первоначального размера. В этом случае размещение изображения по умолчанию используется редко по очевидным причинам. Когда вы вмещает изображение большего размера в меньшую по размерам область страницы, на загрузку этого изображения и затем на смену его размеров идет значительно больше времени, чем если бы изменили его первоначальные размеры. Растяжение же небольшого изображения обычно приводит к проблемам с решением. Однако в последнее время, как ни странно, такой подход в Интернете можно встретить все чаще;
  3. браузеры старых версий сталкиваются с проблемами при работе с Web-страницами, на которых одновременно находятся скрипты и изображения без указанных вручную размеров. Конечно проблемы возникают тогда, когда скрипт запускается на выполнение еще до точного определения размещения всех элементов страницы. Поэтому настоятельно рекомендуется указывать для страниц, содержащих скрипты, размеры изображений в пикселях вручную.
FrontPage автоматически подставляет начальные размеры изображения в поля Height и Width вкладки Appearance. Использование специальных средств FrontPage для работы с изображениями В FrontPage предусмотрен целый набор полезных средств для редактирования изображений. Конечно, эти средства не заменят полноценный редактор графических файлов, однако во многих случаях они сэкономят вам массу времени. Этими средствами можно воспользоваться с помощью панели инструментов Picture. Кнопки этой панели инструментов и их назначение приведены в табл. 3. Добавление надписей в изображение Web-дизайнерам часто приходится сталкиваться с необходимостью добавить текстовую надпись в изображение. Самый простой пример — добавление надписи на рисунок кнопки. В FrontPage для этого предусмотрено специальное средство, которое называется Text On GIFs. Примеры его использования приведены на рис. 10. Воспользоваться этим средством очень просто.
  1. Если вы еще не разместили изображения на Web-странице, сделайте это.
  2. Выберите изображение (щелкнув по нему мышью).
Рис. 9. Левый рисунок — это исходное изображение. Рисунок с надписью — результат применения средства Text On GIFs
  1. В панели инструментов Picture выберите Text.
  2. Вокруг изображения или его части возникнет еще одна рамка с квадратиками. Перетащите ее в то место рисунка, где вы хотите разместить надпись, и наберите нужный вам текст. Вы снова сможете воспользоваться рамкой для перемещения текста в другое место, щелкнув по нему (по тексту).
  3. Выделив текст, вы сможете воспользоваться для него любыми возможностями форматирования, как с помощью пункта Font в меню Format, так и с помощью кнопок на панели инструментов Format
  4. После окончания работы с текстом на рисунке щелкните мышью в любом месте страницы за пределами рисунка. Редактирование будет завершено.
Один из возможных способов гарантировать, что текст в браузере посетителя будет отображаться именно так, как вы задумали (независимо от установленных на компьютере посетителя шрифтов), — создать полностью прозрачный файл GIF и разместить на нем текст. Главное преимущество средства Text On GIFs по сравнению с обработкой изображения в специализированных редакторах — значительная экономия времени. Многие дизайнеры используют наборы прозрачных GIF-файлов, чтобы гарантировать правильное размещение текста в той или иной области экрана. Существует большой соблазн взять маленький прозрачный GIF, растянуть его и разместить на нем изображения. Но это надо делать очень осторожно. Растяжение изображения не приводит к увеличению количества точек в нем. В результате может получиться так, что на рисунке просто не хватит пикселей, чтобы отобразить помещен на него текст с нужным решением. Поэтому лучше не растягивать изображение, а воспользоваться свойством изменения размера (resampling), который описан ниже в данной главе.
Комментарии и пинги к записи запрещены.

Комментарии закрыты.