Как использовать маркеры в ворде? Как настроить маркеры в документе Word Как делать маркеры в ворде

Часто при форматировании списка мы пользуемся маркерами. В Word’е существует стандартный набор маркеров, таких как цифры, символы и т.д. Но во время подготовки проекта, семинара или просто обычного доклада было бы наглядней использовать пиктограммы изображений, вместо классических маркеров. Такой доклад станет информативней. Задумывались ли вы сами когда-нибудь как это вообще можно сделать?

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

Создаем маркированный список в Word

Чтобы вставить изображение в качестве маркера в текст, выделите весь редактируемый текст. На вкладке «Главная» щелкните и раскройте пункт меню «Маркеры».

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

Откроется диалоговое окно «Определение нового маркера». Щелкните по кнопке «Рисунок»

Откроется диалоговое окно «Рисованный маркер». По умолчание здесь отображаются стандартный набор фотографии, которые вы также можете использовать, маркируя список. Но нам необходимо вставить свое изображение. Поэтому мы щелкаем на кнопке «Импорт»

Откроется стандартный проводник Windows. Переходим в папку с нашими фотографиями. Выбираем ту, которую нам необходимо добавить и щелкаем на кнопку «Открыть».

Вы видите, что выбранное изображение добавилось в маркированный список. Выберете изображение из маркированного списка и щелкните «ОК». Откроется окно предварительного просмотра и если нас все устраиваем, нажимаем «ОК». Если вам необходимо вставить еще одно изображение, повторите те же шаги.

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

Предположим, нам надо ввести и оформить следующий текст:
В редакторе Word существуют следующие режимы просмотра каких-либо документа:

• Обычный
• Разметка страницы
• Web-документ
• Структура

Для этого:

В файле Списки.doc введите первую фразу и нажмите клавишу – место вставки списка определен.

Выполните команду Формат/Список. На экране появится диалоговое окошко. Но маркер-ромб в перечне предлагаемых способов оформления списка отсутствует. Чтобы внести его в этот перечень, необходимо какой-нибудь неиспользуемый маркер (например, кружок) заменить новым маркером-ромбом.

Для этого щелкните по заменяемому маркеру, а затем по кнопке Изменить. На экране должно появиться диалоговое окно Изменение маркированного списка.

Щелкните по кнопке Маркер. В появившемся окне выберите символ, который вы хотите использовать в качестве маркера (в нашем случае ромб).

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

После того как новый маркер определен, щелкните по кнопке ОК и введите остальные элементы списка.

При создании маркированных списков в качестве маркеров можно также использовать рисунки. Для этого в диалоговом окне Список щелкните по кнопке Рисунок. В появившемся диалоговом окне Рисованный маркер выберите понравившийся вам рисунок и щелкните по кнопке ОК.

ЗАМЕЧАНИЕ. В диалоговом окне Список вы всегда сможете вернуть списки, установленные по умолчанию. Если при выборе какого-то списка “прорезалась” кнопка Сброс, это значит, что список создан пользователем.

Microsoft Word - одна из самых популярных программ обработки текста, используемая в домах и офисах во всем мире. Чтобы выдвинуть на первый план важные моменты и организовать текст в последовательные списки, Вы можете создать маркированные или пронумерованные пункты. Это важно практически для каждого вида документов - от научных работ до презентаций, докладов, брошюр и книг. Вот как можно добавить маркеры и нумерацию страниц в MS Word.

Инструкция

• 1 Из верхней строки меню Microsoft Word выберите Формат> Список и Нумерация. Если у Вас уже есть текст, в котором Вы хотели бы создать маркированный или пронумерованный список, сначала выберите текст, затем Формат> Список и Нумерация. В любом случае, в окне отражаются и маркеры, и нумерация.
• 2 Для создания маркированного списка нажмите кнопку Маркировка. Выберите нужный стиль, затем нажмите OK, чтобы добавить маркеры в документ.
• 3 Для создания пронумерованного списка выберите кнопку Нумерация. Выберите нужный стиль нумерации, затем нажмите OK, чтобы добавить пронумерованный список в документ.
• 4 Для создания многоуровневого (вложенного) списка перейдите на вкладку Многоуровневый. Выберите нужный стиль, затем нажмите OK, чтобы добавить список в документ.

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

Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В HTML-коде за нумерованный список отвечает тег , а за маркированный – .

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

Чтобы устранить этот негативный эффект надо отменить вывод маркера, воспользовавшись свойством list-style :

ol, ul { list- style: none; }

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

Маркеры через картинки

Наиболее распространенный и простой способ указать для списка маркер – это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода:

ul { list- style: none; } li{ background: url(путь- к- картинке) no- repeat; padding- left: 20px; }

Этот способ радует своей уникальностью, так как позволяет установить абсолютно любой маркер в виде картинки. Ниже показано, как наш код будет выглядеть в браузере:

Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки – это дополнительное обращение к серверу.

Маркеры с помощью before

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

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

Ниже представлен пример кода, который формирует маркированный список с коротким тире:

li{ this. innerHTML = "-" + this. innerHTML) /*хак для IE*/ } li: before{ content: "\201 3" ; }

На практике получим такую картину:

Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями .

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

Использование insertAdjacentHTML

Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML , ниже представлен код этого метода:

li{ //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

Маркеры, нарисованные CSS-свойствами

Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color , а квадратик в виде рамки – border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:

li{ //z-index: expression(runtimeStyle.zIndex = 1, this. innerHTML = "

" + this. innerHTML) /* хак для ие6 и 7 */ } li: before, . listMarkerBackColor{ background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; } html . listMarkerBackColor{ margin- right: 1px; /* исправляем маленткий косяк в IE6 */ }

Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:

Использование before и first-child в комплексе

Такой метод частенько применяется при оформлении хлебных крошек на сайте. Кто не знает о чем речь, смотрим на пример ниже

В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child , который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так

HTML

< ul> < li>< a href= "#" > Главная < li>< a href= "#" > Блог < li>< a href= "#" > CSS < li> Валидный код при использовании target= "_blank"

li: before{ content: "\21 92" ; } li: first- child: before{ content: "" ; }

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

В каких браузерах работает?

6.0+	4.0+	9.5+	3.0+	3.0+	-	-

Выводы

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

Задача

Изменить вид маркеров в списке и заменить их на другой символ.

Решение

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).

Пример 1. Стандартные маркеры

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Чебурашка
• Крокодил Гена
• Шапокляк

В данном примере в качестве маркеров используется квадрат (рис. 1).

Рис. 1. Вид маркеров

Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).

Пример 2. Использование:before и content

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Чебурашка
• Крокодил Гена
• Шапокляк

В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).

Рис. 2. Маркеры в виде символа

Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.