Цветная подложка под текст

Цветная подложка под текст

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

Рассмотрим следующие, наиболее часто применяемые эффекты, реализуемые при помощи таблиц:

  • Верстка текста в несколько колонок
  • Цветные подложки под текст
  • Рамка вокруг фрагмента текста
  • Применение фоновых рисунков

Верстка текста в несколько колонок

Практически все новостные сайты верстаются именно таким образом, располагая в одной колонке непосредственно текст, а в других или краткие новости или рекламу. Достигается этот эффект за счет все тех же невидимых таблиц.

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

Но для примера мы ограничимся простой версткой в две колонки:

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

А вот и код для такой верстки:

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

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

Обратите внимание на атрибут valign="top", прописанный для ячеек, содержащих текст. Как правило, колонки редко бывают заполнены одинаковым объемом текста и в этом случае одна колонка становится короче другой. И чтобы текст в короткой колонке не уполз вниз, мы используем атрибут valign, который прижимает текст в колонках к верху ячейки.

Читайте также:  Емкость аккумулятора sony xperia z1

Цветные подложки под текст

Вы наверняка видели на сайтах, что некоторые фрагменты текста располагаются на фоне, отличном от основного. Обычно это делается для "врезки" цитат или для выделения части текста, чтобы акцентировать на нем внимание. Такой эффект достигается за счет таблицы с одной ячейкой:

Цвет подложки мы можем задавать, используя атрибут bgcolor для таблицы. А чтобы текст на подложке не "прилипал" к границам, мы установим зазор при помощи атрибута cellpadding. Вот, в общем-то, и все, что требуется. И результат будет выглядеть вот так:

Предположим, что этот текст является цитатой или некой полезной информацией. Обратите внимание, как он выделяется на общем фоне страницы, акцентируя на себе внимание.

Рамка вокруг фрагмента текста

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

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

Посмотрите, текст в рамке обращает на себя внимание не меньше, чем подложка. А ведь можно еще и совместить эти способы!

Применение фоновых рисунков

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

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

В общем случае проблема заключается в том, как ячейки наследуют фон таблицы. Internet Explorer просто рассматривает ячейки как прозрачные по отношению к фону и никак не изменяет внешний вид фонового изображения. А вот Netscape Navigator рассматривает фон в каждой ячейке как совершенно независимый от фона таблицы и в каждой ячейке прорисовывает фон заново. Это приводит к тому, что фоновое изображение в таблице коверкается невероятным образом.

Читайте также:  Sql server цикл for

Для обхода этой особенности NN фоновые рисунки в таблице нужно помещать не напрямую, а используя вложенные таблицы. Причем во внешней (я выделил ее зеленым цветом) прописывается адрес фоновой картинки, а во внутренней требуется в качестве фона указать пустой URL:

Отсутствие атрибута background во внутренней таблице NN воспринимает таким странным образом, что отказывается показывать фон, указанный во внешней таблице. И единственный способ борьбы с этим — именно пустой URL.

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Изменить цвет текста заголовка и фона под ним.

Решение

Для изменения цвета фона под текстом используется универсальное свойство background , которое следует добавить к селектору h1 . Цвет заголовка меняется с помощью свойства color , которое также добавляется к этому селектору (пример 1).

Пример 1. Цвет фона под заголовком

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Цвет фона под заголовком текста

Учтите, что на размер цветного прямоугольника влияет не только размер текста, но и отступы вокруг него. Поэтому регулируйте размер фона за счет свойства padding , добавляя его опять же к селектору h1 .

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

В этой статье мы рассмотрим, как сделать рисунок подложкой в ворде, и как сделать подложку в ворде с текстом.

Как сделать рисунок подложкой в ворде

  1. Если вы хотите в ворде сделать подложку из картинки, то перейдите на вкладку « Дизайн » и в группе « Фон страницы » нажмите «Подложка»:
Читайте также:  Как обновить программы на айфоне через компьютер

Как сделать подложку в Word – Команда Подложка
  1. В открывшемся меню выберите пункт «Настраиваемая подложка»:

Как сделать подложку в Word – Настраиваемая подложка в ворде
  1. В окне «Печатная подложка» поставьте флажок для поля «Рисунок». И нажмите кнопку « Выбрать …»

Как сделать подложку в Word – Сделать рисунок подложкой в ворде
  1. В окне « Вставка рисунков » выберите пункт « Из файла », чтобы выбрать рисунок на вашем компьютере для подложки.

Как сделать подложку в Word – Вставка рисунков
  1. Найдите и выберите необходимую картинку для подложки, затем нажмите « Вставить ».

Как сделать подложку в Word – Выбор рисунка для подложки
  1. В окне «Печатная подложка» рядом с кнопкой « Выбрать …» будет прописан адрес картинки. Также вы можете задать масштаб картинки для подложки и выбрать обесцвечивать картинку или нет.

Как сделать подложку в Word – Сделать подложку из картинки в ворде
  1. Нажмите « ОК », чтобы закрыть окно и сделать выбранный рисунок подложкой в ворде.

Как сделать подложку с текстом в ворде

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

  1. На вкладке « Дизайн » нажмите команду «Подложка»:

Как сделать подложку в Word – Команда Подложка
  1. Далее выполните одно из следующих действий:
  • Нажмите на предопределенную подложку, например, «Секретно» или «Не копировать», в галерее подложек:

Как сделать подложку в Word – Выбор подложки из галереи
  • Или нажмите «Настраиваемая подложка…», чтобы открыть диалоговое окно «Печатная подложка»:

Как сделать подложку в Word – Сделать настраиваемую подложку в ворде
  • В открывшемся окне проделайте следующие действия:
  • Установите флажок « Текст ».
  • Введите желаемый текст, который будет отображаться в виде подложки в поле « текст :».
  • Задайте желаемое форматирование: шрифт, размер цвет и прочее.

Как сделать подложку в Word – Сделать подложку с текстом в ворде
  1. Нажмите кнопку « ОК » для добавления подложки в ворде и закрытия текущего окна.

Вот и все, теперь вы знаете, как сделать подложку в ворде с рисунком и с текстом. О том, как убрать подложку в ворде читайте в этой статье.

Ссылка на основную публикацию
Фум лента в стоматологии фото
Автор: G. Freedman Перевод: Александр Зыбайло Автор: G. Freedman Перевод: Александр Зыбайло Ограничение количества цемента для фиксации и использование определенной...
Усики для автомобильной антенны
Убираясь в бардачке я наткнулся на ремкомплект антенных усиков — лежит наверно уже полгода, всё наклеить не могу, то забываю,...
Усиление сигнала интернета на даче своими руками
С наступление дачного сезона, я озадачился установкой хорошего скоростного интернет на даче, у нас голосовая связь работает без проблем, а...
Функции жесткого диска в компьютере
Жесткий диск, он же винчестер, является основным местом, где хранится вся информация. В отличие от оперативной памяти, он энергетически независим,...
Adblock detector