Блоги | Статьи | Форум | Дамский Клуб LADY

Блог о блогахСоздан: 15.02.2008Статей: 14Автор: ВебмастерПодписатьсяw

Первое знакомство с визуальным редактором

Обновлено: 19.05.08 22:33 Убрать стили оформления

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

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

Хотя, кое-какие специфические инструменты все же присутствуют. Итак:

fullscreen полноэкранный режим. Позволяет распахнуть окно редактора на весь экран, чтобы ничто не ограничивало вам свободу творчества. Повторное нажатие этой кнопки возвращает редактор в исходное состояние
template вставить шаблон. Позволяет выбрать определенную компоновку страницы, может оказаться полезной для новичков. Пока нарисовал два самых простых, если данная функция будет востребована, еще добавлю
preview предварительный просмотр. Позволяет увидеть, как будет выглядеть набранный вами текст.
print печать
cut_copy всем, наверное, знакомые кнопки "Вырезать" и "Копировать"
paste а вот кнопок "вставки" целых три: одна обычная вставка, вторая вставляет скопированный текст без сохранения форматирования, а третья, под названием "Вставить из Word" позволяет вставить текст с сохранением форматирования, т.е. отступами, цветами и размерами шрифтов, такими, какими вы их скопировали из Ворда. Теперь вы можете выкладывать набранные в Ворде наброски, заметки или произведения в своем блог двумя кликами: скопировал-вставил. И все, вы получаете текст таким(ну или почти таким), каким вы видите его в Ворде. (правда работает только в Internet Explorer. Но для FireFox есть несколько обходных путей)
undo_redo тоже наверное знакомые всем и очень полезные кнопочки отмены и повторения последнего совершенного действия. Особенно кнопочки "Отмена" так не хватает иногда на форуме при наборе сообщения.
spell проверка орфографии. Проверяется, увы, только орфография и не "на лету", а только после нажатия на эту кнопочку и весь текст сразу. При этом, проверка займет какое-то время, в зависимости от объема текста и скорости вашего интернет соединения.
search_replace поиск и замена текста
bullist_numlist вставка маркированного и нумерованного списков
outdent_indent сдвигает выделенный блок вправо или влево
blockquote /><br /> <img src= оформляет выделенный абзац в форме отдельного сдвинутого вправо блока, как обычно и принято выделять цитаты

link_unlink вставка и удаление гиперссылок. Выделяете мышкой нужный текст, жмете на кнопку "Вставить гиперссылку" и вводите "Адрес ссылки", т.е. куда должен переадресовываться посетитель при щелчке по вашей ссылке. Гиперссылка может быть внешней, т.е. указывать на другой сайт в интернете или внутренней, если она указывает на другую страницу на этом же сайте. Также ссылка может ссылаться на адрес электронной почты, тогда при щелчке по ссылке будет открываться почтовая программа с созданным пустым письмом на указанный адрес. Также гиперссылка может ссылаться на "якорь"

anchor вставка так называемого "якоря" или метки на определенный участок страницы. Бывает полезно в больших текстах для создания содержания и быстрого перехода по ссылкам непосредственно к нужному абзацу. По стандарту HTML имя якоря может состоять только из латинских букв и цифр, при этом начинаться должно с буквы.
image вставка картинок. Указывайте "Адрес изображения" или воспользуйтесь ссылкой "загрузить" для использования нашего сервиса загрузки картинок. Здесь обратите внимание на поле "Описание изображения". Рекомендуется его заполнять. Например, если вы загрузили фотографию своей кошки, напишите в этом поле "Моя кошка" или "Мурка играет с мячиком", этот текст будет выводиться посетителям сайта с отключенным показом картинок, по этому тексту они смогут получить представление о том, что это за фотография и стоит ли им её загружать. На второй вкладке "Вид" обратите внимание на очень полезные параметры "Выравнивание" и "Отступ", они помогают расположить вашу картинку среди текста наилучшим образом. Инструкция в картинках
charmap вставка спецсимволов, всяко-разно стрелочек, символов валют и прочих кракозябр
emotions вставка смайликов
media вставка видеороликов с YouTube

format форматирование текста жирным курсивом подчеркиванием подстрочным и надстрочным индексами
justify тоже знакомые, наверное, всем кнопки выравнивания абзаца

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

forecolor задание цвета выделенного текста
backcolor задание цвета фона
styleprops очень полезная для продвинутых пользователей кнопочка "Стиль", позволяющая задать параметры оформления и расположения элементов страницы

table эта и следующие за ней кнопки относятся к работе с таблицами, созданию, изменению свойств, вставки и удалению строк и столбцов. Вообще, в вебдизайне таблицы занимают огромную роль, большинство компоновок страницы строится именно при помощи таблиц. Здесь же следует сразу упомянуть и самой большой проблеме вебдизайна, а именно приведению страницы к виду, пригодному для просмотра на мониторах с любым разрешением. Это называется "резиновый дизайн". Например, если у вас 17' монитор с разрешением 1024*768 и вы создали таблицу шириной 1000 пикселей, то на вашем мониторе она будет отображаться на всю ширину, на меньшем мониторе будет появляться горизонтальная полоса прокрутки, а на большем мониторе она будет выводиться не на всю ширину, что само собой, не очень красиво. Поэтому, всегда помните об этом и при создании таблиц указывайте не абсолютные размеры, а относительные в процентах, т.е. если ваша таблица должна выводиться на всю ширину страницы, в поле "Ширина" указывайте 100%, тогда она будет отображаться на всю ширину на любых мониторах. То же касается ячеек таблицы, для каждой ячейки можно указать её ширину, например, если у вас таблица из двух столбцов, первый из которых должен быть уже другого, можно указать 30% и 70%. В указании ширины ячеек уже можно комбинировать абсолютные и относительные размеры, например, если вы знаете, что в первом столбце у вас аватары, размеров не превышающем 120 пикселей, то для этой ячейки можно задать относительный размер 120, а для второй указать размер 100%, тогда она растянется на всю оставшуюся ширину экрана
slit_merge разделение и объединение ячеек созданной таблицы, нужно обычно для создания вертикальных и горизонтальных заголовков
hr вставка горизонтальной линии, можно использовать для разделения абзацев текста
removeformat очистка форматирования
visualaid включить разметку блоков. Нечто подобное есть и в Ворде, полезно при работе с документами, имеющими сложную компоновку
visualchars включить отображением непечатаемых символов, таких как переносы строк и другое
nonbreaking "неразрывный пробел". Нужен, когда вы не хотите разрывать слова на странице, например, дату со временем или фамилию с именем. Если меду словами будет стоять неразрывный пробел и одно из них не будет умещаться на текущую строку, то они оба перенесутся на следующую
layer работа со слоями. При помощи них можно создавать очень сложные и необычные компоновки страниц с абсолютными смещениями блоков, их перекрытием и др. В сочетании со стилями являются чрезвычайно мощным инструментом вебдизайна, постепенно вытесняющему таблицы
cleanup очистка кода. Все визуальные редакторы создают так называемый "избыточный код", особенно если вы долго работали над каким-то фрагментов текста, постоянно переделывая его, его код может занимать гораздо больше место, чем реально нужно для его отображения.
code самая интересная кнопка, позволяет увидеть код созданной страницы и при необходимости подправить его. Код - это совокупность набранного вами текста и так называемых тегов и их атрибутов, придающих тексту внешнее оформление. Создание страницы с помощью визуального редактора с последующим изучением созданного кода является наилучшим способом изучения языка разметки HTML и основ вебдизайна. Если вы подумываете о создании когда-нибудь собственного сайта - эта кнопка для вас. Вы также можете посмотреть код любой понравившейся вам страницы в интернете, воспользовавшись в вашем браузере пунктом меню "Просмотреть исходный код страницы" или "Просмотр HTML-кода", скопировать нужный участок себе в визуальный редактор и попробовать разобраться, как это реализовано и сделать что-нибудь подобное самому.

help ну и справка, сделаю там короткую памятку и ответы на часто задаваемые вопросы по работе с визуальным редактором

Так же, как и в Ворде, кнопки панели инструментов могут доступны или недоступны в зависимости от контекста выполняемой задачи. Так же, как и в Ворде, есть контекстное меню, вызываемое правой клавишей мышки. Так же работают большинство "горячих клавиш", например, копирование CTRL+C, вставка CTRL+V, выделение жирным CTRL+B, курсивом CTRL+I, отмена последнего действия CTRL+Z и т.д.

Успехов вам в вашем творчестве Улыбка



Комментарии:
Поделитесь с друзьями ссылкой на эту статью:

Оцените и выскажите своё мнение о данной статье
Для отправки мнения необходимо зарегистрироваться или выполнить вход.  Ваша оценка:  


Всего отзывов: 9 в т.ч. с оценками: 7 Сред.балл: 5

Другие мнения о данной статье:


Июль [30.05.2008 17:59] Июль 5 5
Мастер, а что такое "слои"? А можно поподробнее? Какие такие компоновки можно создавать, как-то непонятно пока...

Morning [04.06.2008 00:55] Morning 5 5
Поддерживаю Июлю! Про слои хотелось бы знать немного больше..

[21.06.2009 18:30] babushka 5 5
Спасибо за статью, даже не знала, что есть дополнительная панель. Учусь самостоятельно, все писала в HTML.Теперь буду осваивать визуальный редактор.

dita [23.05.2010 17:30] dita 5 5
спасибо большое за статью!!!

Lapunya [15.07.2010 11:25] Lapunya 5 5
как всегда, все предельно доступно и понятно. Спасибо!

alenatara [03.09.2012 17:40] alenatara 5 5
А вот у меня кнопка Вырезать вообще не фунциклирует, даже при использовании "горячих" клавиш, а кнопка Скопировать частенько не срабатывает... Наверное, из-за интернет-браузера (у меня Chrome), а вообще очень полезная штукенция...Спасибо, Мастер!

aria-fialka [14.07.2013 04:10] aria-fialka 5 5
Просто блеск , Мастер !С такими подробными объяснениями станет легче работать с текстом, особенно начинающим бумагокропателям...

Нефер Митанни [29.07.2020 12:42] Нефер Митанни
Как убрать текст под спойлер?

Вебмастер [29.07.2020 12:49] Вебмастер
Спойлеров в блогах, к сожалению, нет.

Посетители, комментировавшие эту статью, комментируют также следующие:
Натаниэлла: Мистика тверских легенд Peony Rose: Воспоминания Ольга Ларина: Немного нервно. (комплекты заняты) Аня Ли Гартке: Дай своего мужа напрокат!

Список статей:



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