Визуальный генератор страниц сайта
Этот простой on-line генератор страниц сайта позволяет Вам создавать страницы Вашего сайта как в обычном текстовом редакторе. Он умеет генерировать все самые необходимые html-тэги в теле web-страницы. Этот генератор html-кода тела страниц сайта многократно ускорит создание страниц сайта.
Некоторые замечания по использованию генератора страниц сайта
Этот генератор страниц сайта является визуальным в том смысле, что он генерирует такой html-код страницы, чтобы в в том браузере, в котором Вы находитесь при работе с этим генератором, страница отображалась точно также, как Вы её видите в окне редактора. Данный редактор-генератор генерирует только коды разметки, то есть только HTML. Он не предназначен для создания скриптов на таких языках программирования, как JavaScript или PHP.
Данный редактор предназначен для начинающих вэб-мастеров, которые только приступают к изучению языка разметки HTML. Но он будет полезен и опытным сайтостроителям для быстрого создания маленьких страниц или шаблонов страниц. Начинающих вэб-мастеров тут привлечет возможность быстрого сравнения внесённых в дизайн страницы изменений с тем, как это отображается на изменении html-разметки страницы. Такое оперативное сравнение позволяет изучить HTML максимально быстро и эффективно.
Данный редактор не предназначен для работы с очень большим текстом и большим количеством "тяжелых" картинок. Если Вы хотите в этом редакторе создать web-страницу с очень большим текстом и/или с картинками большого объема, то лучше создайте сначала полный шаблон web-страницы, скопируйте полученный html-код в файл web-страницы и только потом вставляйте туда длинный текст и ссылки на картинки. Помните, что данный редактор не является профессиональным редактором и предназначен, в первую очередь, для любителей и начинающих вэб-мастеров. Его основное предназначение это помочь начинающим в обучении сайтостроения.
Перейти в редактор web-страниц
Инструкция по использованию
Если Вы когда-нибудь пользовались редакторами текстов типа MS Word, то у Вас не будет никаких трудностей с освоением этого генератора web-страниц. Этот редактор можно использовать или для создания тела web-страницы с нуля или для исправления уже существующей web-страницы, чтобы внести в неё свои изменения.
Если Вы начинаете создавать свою страницу с нуля, то Вам надо стереть мой начальный текст в окне редактора и начать вводить туда свой текст, картинки и делать своё форматирование. Когда работа будет закончена, надо в нижней части экрана редактора нажать на кнопку "Code" и скопировать полученный код в файл Вашей web-страницы. И сохранить этот файл. Обратите внимание, что копировать полученные коды надо только в тело web-страницы, то есть только между тэгами <body> и </body>. Сами теги body редактором не создаются.
Если Вы хотите редактировать какую-то уже готовую web-страницу, например, созданную не Вами или которую Вы создали давно, то Вам надо в нижней части экрана редактора нажать на кнопку "Code", удалить из окна редактора все мои начальные коды и скопировать туда коды из файла web-страницы. Обратите внимание, что копировать коды нужно только из тела существующей web-страницы, то есть только то, что находится между тэгами <body> и </body>. Сами теги body копировать в редактор не надо. Затем вам надо опять переключиться в режим визуального редактирования. Для этого надо нажать на кнопку "Design" в нижней части окна редактора и начать вносить изменения во внешний вид страницы.
Понятно, что редактировать тело web-страницы можно в этом редакторе двояко. Или в режиме "Design" редактировать визуально или в режиме "Code" редактировать сразу в кодах. Поэтому для начинающих web-мастеров это редактор очень полезен для обучения. Вы можете внести какие-то небольшие изменения в web-страницу в визуальном режиме и тут же посмотреть, как изменился при этом код, переключившись в режим редактирования кода. Или, наоборот, Вы можете внести какие-нибудь небольшие изменения в код web-страницы в режиме редактирования кода и тут же посмотреть, как измениться Ваша web-страница, переключившись в режим визуального редактирования (или в режим просмотра с помощью кнопки "Preview").
Обычное редактирование текста
В верхней строке меню находятся кнопки общего редактирования текста. У них стандартные обозначения, которые приняты в любых других редакторов текста. Поэтому только кратко пробежимся по ним.
Всё работает очень просто. Вы или выделяете какую-нибудь часть текста и нажимаете на кнопку верхнего меню, чтобы эта часть текста была отформатирована соответствующим образом. Или, если ничего не выделено, то происходит переключение в режим соответствующей кнопки, то есть, если дальше будете набирать текст, то текст будет набираться в режиме той кнопки, которую Вы только что включили.
Также, как и в любом текстовом редакторе, есть режимы, применяемые только для абзаца в целом и режимы, которые можно применить к части абзаца.
Краткое описание всех кнопочек верхней части меню в порядке их расположения:
- Paragraph. Выбирает уровень заголовка. Применяется для абзаца в целом.
- Шрифты.
- Размер шрифта.
- Цвет шрифта.
- Жирный шрифт.
- Наклонный шрифт.
- Подчеркнутый шрифт.
- Зачеркнутый шрифт.
- Выравнивание влево. Применяется для абзаца в целом.
- Центрирование. Применяется для абзаца в целом.
- Выравнивание вправо. Применяется для абзаца в целом.
- Двустороннее выравнивание. Применяется для абзаца в целом.
- Горизонтальная линия. Это и не абзацная вещь и не для части абзаца. Это просто вставка горизонтальной линии на всю ширину.
- Верхний индекс.
- Нижний индекс.
Основное html-редактирование
В средней строке меню находятся как кнопки для типичного редактирования web-страницы, так и сервисные кнопки обычных редакторов.
Описание всех кнопочек верхней части меню в порядке их расположения:
- Создание гиперссылки. Обязательно нужно выделить мышкой тот текст или картинку, при нажатие на которых Вы хотите, чтобы произошел переход на другую
web-страницу. После выделения жмете на кнопку меню и открываете окошко, в котором Вы должны задать адрес, куда будет идти переход (URL) и условия перехода
(target). Вы можете задать следующие условия:
- Пусто. По умолчанию новая страница откроется в том же самом окне.
- _blank. Новая страница будет выводиться в новом окне браузера (или в новой вкладке браузера, в зависимости от конкретных настроек браузера).
- _parent. Новая страница будет выводиться в родительском окне (или вкладке) браузера. Если родительского окна (или вклпдки) нет, то это аналог условия _self.
- _self. Новая страница будет выводиться в то же самое окно, в котором находится ссылка. Это аналог режима "Пусто".
- _top. Если страница сайта с фреймами (то есть разбита на несколько окон), то новая страница будет выводиться во всё окно браузера. В обычном случае это тоже аналог режима _self.
- Отмена гиперссылки. Выделяете текст гиперссылки ПОЛНОСТЬЮ. Если выделите только часть текста гиперссылки, то невыделенная часть останется гиперссылкой. Например, если выделили только центральную часть текста гиперссылки, то образуется две гиперссылки с одинаковым адресом на невыделенных текстах.
- Вставка картинки. Ставите курсор в то место, где должна быть картинка и жмёте на кнопку. В открывшимся окошке задаете путь к картинке (Image URL), описание
картинки (Image Description), выравнивание картинки на странице (Alignment), ширину границы (Border) и отступы картинки от текста (или других элементов на
странице по горизонтали и по вертикали (HSpace, VSpace). Выравнивание картинки Вы можете задать следующим:
- Пусто. По умолчанию это выравнивание по левому краю.
- BaseLine. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет располагаться так, как решили создатели Вашего браузера.
- Top. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по верхней части картинки.
- Middle. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по центру картинки.
- Dottom. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по нижней части картинки.
- TextTop. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет размещен над картинкой. (Поддерживается не всеми браузерами.)
- Absolute Middle. (Поддерживается не всеми браузерами.)
- Absolute Bottom. (Поддерживается не всеми браузерами.)
- Left. Картинка будет размещена слева от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.
- Right. Картинка будет размещена справа от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.
- Отмена Форматирования. Отменяет форматирование, которое было сделано при помощи кнопок верхней строки меню, которые относятся к форматированию части абзаца. Работает точно также, как и кнопки верхнего меню, когда надо отменить форматирование, то есть выделяем нужный кусок текста и нажимаем на эту кнопку. Удобство этой кнопки состоит в том, что она одним нажатием сразу убирает всё форматирование, всех видов, которые были в выделенном фрагменте.
- Создание и редактирование таблицы. Кнопка применяется, чтобы создать таблицу в месте расположения курсора или отредактировать выделенную таблицу. При создании
таблицы надо задать следующие параметры:
- Rows - число строк.
- Columns - число столбцов.
- Width - ширина таблицы. Задается или в процентах от ширины экрана или в пикселях.
- Border - ширина границ ячеек. Если оставить значение 0, то границы ячеек не будут видны.
- CellSpacing - расстояние в пикселях между ячейками таблицы.
- CellPadding - расстояние в пикселях от границы ячейки до текста внутри ячейки.
- Alignment - выравнивание таблицы на страницы:
- Default. По умолчанию, как задали разработчики Вашего браузера.
- Left. Таблица прижата к левому краю страницы.
- Center. Таблица расположена в центре web-страницы.
- Right. Таблица прижата к правому краю страницы.
- Создать один столбец слева от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
- Создать один столбец справа от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
- Создать одну строку выше от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
- Создать одну строку ниже от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
- Удалить один столбец от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
- Удалить одну строку от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
- Создать нумерованный список. Либо выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами нумерованного списка. Либо ставите в нужное место курсор, нажимаете на эту кнопку меню и далее все абзацы, которые Вы вводите, автоматически становятся элементами нумерованного списка.
- Создать простой список. Выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами простого списка без нумерации.
- Удаление отступа. Курсор должен стоять на том абзаце, отступы которого хотим удалить. Можно выделить весь абзац или только его часть.
- Создание отступа. Курсор должен стоять на том абзаце, у которого хотим создать отступ слева. Можно выделить весь абзац или только его часть. Отступ создается для всего абзаца в целом (а не только для первой строки).
- Откат всех изменений назад. Пока Вы не нажали на кнопку "Code" или "Preview", Вы можете удалить все сделанные изменения и вернуться к тому состоянию, которое было последний раз при просмотре кода или просмотра страницы.
- Восстановление всех убранных изменений вперед. Если Вы сделали обратный откат изменений больше, чем нужно, то можете восстановить убранные изменения. Точно также, если после отката изменений Вы переходили в режим "code" или "Preview", то восстановить изменения уже не сможете.
- Уничтожить выделенное с одновременным копированием выделенного в "карман" Windows. (Ctrl+X)
- Копировать выделенное в "карман" Windows. (Ctrl+C)
- Вставить содержимое "кармана" Windows в то место, где стоит курсор. (Ctrl+V)
Дополнительное html-редактирование
В третьей строке меню находятся, в основном, кнопки для создания и редактирования форм, а также некоторых обычных дополнительных возможностей любого редактора.
Список кнопок третьей строки меню в порядке их расположения:
- Создать форму. Надо в открытом окошке ввести имя формы, адрес скрипта, который будет обрабатывать данные этой формы и метод передачи данных (post или get).
- Создать Check Box. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, стоит или нет галочка выбора изначально в этой форме.
- Создать Radio-кнопку. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, выбрана эта кнопка изначально или нет. При создании меню из radio-кнопок, не забывайте, что все radio-кнопки одного и того же меню должны иметь одно и тоже название.
- Создать площадку для ввода текста. В открытом окошке вводите название площадки для ввода текста, ширину площадки числом символов, число строк площадки, расположение абзацев и полос прокрутки и начальный текст в этом поле.
- Создать кнопку "Выполнить". В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
- Создать кнопку "Выполнить" в виде картинки. В открывшемся окошке пишем имя кнопки и адрес той картинки, которая будет играть роль кнопки.
- Создать кнопку очистки заполненной формы и возврата всех значений по умолчанию. В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
- Создать скрытое поле. В открывшемся окошке пишем имя скрытого поля и его значение.
- Создать поле для ввода пароля звездочками. В открывшемся окошке пишем имя поля пароля, длину поля и максимальное число символов пароля, которое сможет ввести пользователь при вводе своего пароля.
- Создать текстовое поле. В открывшемся окошке пишем имя текстового поля, его размер в символах, сколько максимум символов может ввести пользователь и начальный текст в этом поле.
- Отправить на печать.
- Выделить всё.
...
------------------
Автор статьи: Евгений Миронов.
[0] Создание страниц простого сайта
[1] Инструкция по применению визуального редактора страниц сайта
[2] Инструкция по применению генератора мета-тэгов
[3] Учебный пример создания сайта
[4] Учебный пример создания интернет-магазина
[R] Бесплатные HTML-редакторы
с вложениями денег:
без вложений денег:
для тех у кого нет сайта
заработки на сайте
с учебниками
Скорее КинжЛог!
Microsoft Word вер.10