Как работать в композере

Как создать гиперссылку с помощью KompoZer

Возможность создать ссылку в документе, который приведет вас к другому документу, возможно, в сети, находящейся на полпути по всему миру, является, пожалуй, самой важной причиной, по которой была изобретена Всемирная паутина. Эти ссылки, называемые гиперссылками, являются «H» в HTML (язык разметки гипертекста). Без гиперссылок Интернет был бы не очень полезен. Не было бы никаких поисковых систем, социальных сетей или баннерной рекламы (хорошо, большинство из нас могло бы стоять, чтобы увидеть это).

Когда вы создаете свои собственные веб-страницы, вы захотите создать гиперссылки, и у KompoZer есть инструменты, которые позволяют легко добавлять ссылки любого типа. Образец страницы, изображенный в этом руководстве, будет содержать ссылки на другие веб-сайты четырех категорий, другие части этой же веб-страницы и сообщение электронной почты. Я начну с заголовка и четырех

заголовки для каждой категории. На следующей странице мы добавим несколько ссылок.

Создание гиперссылки с помощью KompoZer

Доступ к инструментам гиперссылки KompoZer можно получить, нажав кнопку «Ссылка» на панели инструментов. Чтобы создать гиперссылку:

1. Поместите курсор на страницу, где вы хотите разместить гиперссылку.
2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно «Свойства ссылки».
3. Первое поле, которое вам нужно заполнить, это поле «Текст ссылки». Введите текст, который вы хотите, чтобы появиться на странице для вашей гиперссылки.
4. Второе поле, которое вам нужно заполнить, это поле Link Location. Введите URL-адрес страницы, по которой ваша гиперссылка примет пользователя при нажатии. Рекомендуется скопировать и вставить URL-адрес из адресной строки вашего браузера. Таким образом, вероятность того, что вы совершите ошибку, намного ниже, и вы знаете, по крайней мере, во время создания своей ссылки, что страница жива и эта ссылка не повреждена.
5. Нажмите кнопку ОК, и диалоговое окно «Свойства ссылки» закроется. Ваша ссылка теперь появится на вашей странице.

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

Создание якорной ссылки с KompoZer

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

KompoZer позволяет создавать якоря, на которые вы можете ссылаться с помощью инструмента «Якорь» на панели инструментов.

1. Нажмите на область вашей страницы, где вы хотите привязку. То есть туда, куда вы хотите, чтобы просмотрщик страниц переходил при нажатии на ссылку привязки. В этом примере я щелкнул непосредственно перед «F» в заголовке «Любимая музыка».
2. Нажмите кнопку привязки на панели инструментов. Откроется диалоговое окно Свойства именованной привязки.
3. Каждый якорь на странице должен иметь уникальное имя. Для этого якоря я использовал название «музыка».
4. Нажмите кнопку ОК, и вы должны увидеть, и символ привязки появится в том месте, где вы хотели привязку. Этот символ не будет отображаться на вашей веб-странице, просто KompoZer показывает вам, где находятся ваши якоря.
5. Повторите процедуру для любых других областей страницы, на которые вы хотите, чтобы пользователи могли переходить. Если на странице много текста, разделенного заголовками или каким-либо другим логическим разделителем, привязки – это простой способ навигации по странице.

Далее мы создадим ссылки, которые приведут читателя к якорям, которые вы создали.

Создание навигации по страницам с помощью KompoZer

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

Создание гиперссылок на якоря с помощью KompoZer

Теперь, когда у нас есть привязки и введен текст, который мы будем использовать для навигации по страницам, мы можем превратить эти фрагменты простого текста в ссылки. Мы снова будем использовать кнопку «Ссылка», но на этот раз она будет работать немного иначе.

1. Выберите текст, который вы хотите превратить в ссылку. В этом примере я выбрал текст «Любимая музыка», который находится в первой ячейке таблицы вверху страницы.
2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно «Свойства ссылки».
3. В этом случае мы выбрали текст, прежде чем нажать кнопку «Ссылка», поэтому раздел «Текст ссылки» окна уже заполнен и не может быть отредактирован. Нажмите стрелку вниз в разделе Расположение ссылки. Вы увидите список якорей, которые вы создали на предыдущих шагах. Для этого примера я выбрал #music anchor.
4. Нажмите ОК. Текст «Любимая музыка» на панели навигации превращается в ссылку, которая заставит зрителя при нажатии перейти в этот раздел на странице.

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

Создание гиперссылки из изображения с помощью KompoZer

Знаете ли вы, что вы можете создать ссылку из изображений, а также текст? KompoZer позволяет сделать это всего за несколько кликов. Здесь я вставил маленькое изображение значка со стрелкой, указывающей вверх, и текстом «TOP» внизу страницы. Я собираюсь использовать это изображение в качестве ссылки, чтобы вернуться к началу страницы.

Kompozer текстовый редактор для работы с HTML

Kompozer – это визуальный редактор для разработки HTML-страниц. Данное ПО сложно рекомендовать профессиональным разработчикам и верстальщикам, так как в нём имеется только необходимый минимум для работы с HTML-тэгами и их корректным отображением, а также выводом готового результата в специальную область. Здесь можно с помощью HTML разметки отформатировать текст на странице, вставить изображения, формы и другие элементы.

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

Рабочая область

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

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

Редактор

Основную часть интерфейса программы занимают поля, где разработчик работает с кодом. Вся структура проекта отображается в левой части окна. Там же находится и информация о применяемых тэгах. В основном блоке вы можете видеть не только HTML-разметку, но и вкладки. При переходе во вкладку «Preview» вы можете увидеть результат того, как ваша HTML-разметка будет отображаться в браузере пользователя.

Также редактор позволяет работать только с текстом, без использования HTML-тэгов. В таком случае вам просто нужно переключиться во вкладку «Normal», которая подразумевает только работу с текстом. Здесь также поддерживается вставка различных элементов – ссылок, изображений, анкоров, таблиц форм. С помощью комбинаций клавиш Ctrl+Z и Ctrl+Y или специальных кнопок пользователь может повторить или отметить последнее действие. Это доступно в любой рабочей среде.

Работа с FTP-клиентом

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

Текстовый редактор

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

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

Достоинства и недостатки Kompozer

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

• Встроены инструменты для редактирования как обычного текста, так и HTML-разметки;
• Программу можно бесплатно скачать и использовать без каких-либо ограничений и неудобств;
• Пользовательский интерфейс максимально прост и понятен;
• Поддерживается работа с кодом в режиме реального времени.

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

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

Визуальный HTML-редактор KompoZer

Часто веб-программисту требуется набросать макет страницы сайта, которую он программирует. Программа KompoZer позволяет это сделать быстро и легко.

1. Преимущества KompoZer

KompoZer – это редактор веб-страниц, который позволяет работать как в режиме кода, так и в режиме WYSIWYG (то есть, «что видишь — то и получаешь»). С помощью редактора можно легко вставлять в текст формы, таблицы, спецсимволы, а потом переключаться в режим кода и копировать HTML-текст в ваш проект. Редактор удобен тем, что вам не нужно запоминать многочисленные HTML-теги.

Имеет следующие особенности:

• быстрый,
• бесплатный,
• кроссплатформенный,
• портабельный,
• русскоязычный,
• расширяемый.

2. Запуск программы

Редактор KompoZer включен в сборку “PHP-экспресс“, поэтому, если она у вас установлена, то для запуска нажмите на

При запуске появляется пустая страница. Но если внизу нажать на вкладку «Код», то можно увидеть шаблон HTML-страницы.

3. Настройки программы KompoZer

Для изменения настроек нажмите меню “Инструменты – Настройки”. При разработке сайта потребуется работать с самыми различными форматами файлов. Эти форматы можно настроить для открытия в программе KompoZer.

Вы можете настраивать панели инструментов. Для этого щелкните правой кнопкой мыши на панели и нажмите «Настроить…».

4. Работа с таблицами стилей CSS

Для создания стиля редактируемого HTML-документа в меню «Инструменты» выберите пункт «Редактор CSS».

Вы можете сразу задать новое правило для стиля. Для этого выберите элемент и нажмите «Создать правило стиля».

Пример стиля сразу отображается и поэтому создание CSS-стиля — это удобный и наглядный процесс.

Kompozer, программа для новичка

Здравствуйте друзья! В статье мы рассмотрим программу Kompozer, с помощью которой мы научимся создавать подписные и продающие страницы.

Подписная страница в Kompozer за час

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

Создавать продажник по шаблону будет сложнее, поэтому её лучше сделать с нуля. Для создания подписных и продающих страниц (лендинг) существуют различные программы (конструкторы). Одной из таких программ является программа KompoZer и её прародитель Nvu – по сути это одна и та же программа.

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

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

Итак, программа бесплатная, для начала надо скачать её к себе на компьютер. Если просто Вы попытаетесь её скачать с официального сайта Kompozer.net – Вы получите англоязычную версию. Поэтому поступаем следующим образом. Заходим в любой браузер и прописываем в адресной строке следующий адрес froggy-soft.ru/KompoZer.html и нажимаем Enter.

Нам будет предложено скачать программу Композер, в новом окне может быть предложено, скачать программу NVU, скачивайте смело, это одно и то же. Программу, которую я скачивал с этого портала, была русифицирована. Теперь её надо разархивировать и установить на компьютер, делается это за минуту. Можно зайти сюда http://kompozer.net/download-07.php#l10n и скачать русифицированную версию (смотрите скрин). В последнее время предыдущая ссылка иногда не работает, поэтому можете зайти сюда и скачать русифицированную версию [urlspan]здесь[/urlspan].

Можно найти версии программы для Windows, Mac и других операционных систем.

После запуска программы она открывается в таком виде (смотрите скрин 2).

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

Если выполненное действие надо отменить, то мы нажимаем кнопку «Правка» и «Отменить». Кнопки «Вставка», «Формат» будут использоваться для создания страницы, и функционал этих кнопок увидим по ходу работы. Создание лендинга начинается с создания таблицы, поэтому будем использовать функцию «Таблицы», выделено коричневым цветом. Для вставки на подписную страницу изображений и ссылок, будем использовать функции «Изображение» и «Ссылка».

Для работы с текстом, будем использовать выбор шрифта (ниже поля выбора жирный и курсив), выбор цвета шрифта (выделено розовой рамкой). Размер шрифта регулируется стрелками над буквами «А» — большая буква увеличивает шрифт, маленькая, уменьшает (подчеркнуто на скрине, синим цветом).

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

Теперь, когда разобрались с функционалом, перейдём к созданию тестовой подписной страницы. Для начала надо определиться с геометрическим размером (с шириной) нашей подписной страницы, обычно её делают 600-900 px. Выбираем ширину 800 px.

Теперь идём в меню программы и нажимаем «Таблица» (смотрите скрин 2). Открывается окно «Вставка таблицы».

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

В окне программы появился проект нашей таблицы. Нажимаем правой кнопкой мыши на таблицу и выбираем «Свойства ячейки таблицы».

Открывается окно таблицы, в верхнем левом углу выбираем «Таблица», в полях «Высота», «Ширина» выставляем размерность в пикселях (в процентах будет неудобно). Мы уже решили, что ширина лендинга будет 800 px, поэтому прописываем ширину 800 (смотрите скрин).

Далее проставляем размеры рамки и полей, я сделал рамку 5 px. Теперь выравниваем таблицу по центру и нажимаем «Применить» «Ок». Как видим, сформирована заготовка для создания подписной страницы нужного размера, остается наполнить подписную страницу содержимым.

Перед заполнением лендинга, надо выполнить подготовительные работы. Для этого создаем на компьютере отдельную папку с названием нашей подписной страницей (написать лучше на латинице). Теперь присваиваем имя файла будущей подписной в Kompozer, для этого идём в «Файл», нажимаем «Сохранить как». Имя присвоить лучше index и сохраняем файл в заранее созданную папку. В эту же папку обязательно надо загрузить все картинки, которые мы собираемся использовать в подписной странице, причем их название должно быть написано на латинице.

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

Печатаете или переносите заголовок, подзаголовок и текст в таблицу, выравниваете заголовок по центру с помощью функционала (смотрите скрин 2), делаете шрифт нужного размера и цвета. Иногда для выравнивания заголовка по центру надо переместить курсор на следующую строку, а затем уже центровать. В основном там всё просто.

Для того чтобы вставить в нужное место картинку, устанавливаем курсор в нужное нам место страницы, нажимаем кнопку «Изображение» (смотрите скрин 2). В открывшемся окне нажать кнопку «Выбрать файл» (скрин),

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

В строке «Адрес изображения» автоматически пропишется название вставляемой картинки, галочка «Относительный URL» должна стоять, желательно заполнить поле «Альтернативный текст», либо отметить поле «Не использовать альтернативный текст» и нажимаем «Ок». Если размер изображения нужно скорректировать, то это делается с помощью кнопки «Размеры», «Задать размер», там ничего сложного нет. Если курсор будет по центру, то и изображение будет по центру.

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

Теперь рассмотрим, как установить форму подписки, либо кнопки социальных сетей, всё то, что связано с установкой через код HTML. Делается это просто. Предварительно генерируем форму подписки, например, в SmartResponder и сохраняем полученный код формы подписки. Это отдельная тема, поэтому её здесь рассматривать не будем.

Теперь выбираем место, куда надо установить форму подписки на подписной странице (я поставил слева) и нажимаем правой кнопкой мыши, теперь выбираем «Вставить таблицу», «Таблица».

Теперь таблицу устанавливаем по центру, выше мы рассматривали, как это делать.

Ставим курсор внутрь таблицы, идем в меню «Вставка», выбираем «HTML» (смотрите скрин),

«Вставка», всё наша форма подписки установлена. Таким же путём мы можем установить и кнопки социальных сетей.

Теперь рассмотрим, как установить ссылку на элемент текста. Предположим нам надо сделать кликабельным выражение «Служба технической поддержки». Пишем текст, выделяем его. Нажимаем на кнопку «Ссылка» (скрин 2), в открывшемся окне вставляем нужную ссылку и нажимаем «Ок», не забываем нажать «Сохранить». Да и еще, надо сделать так, чтобы ссылка открывалась в новом окне. Как это сделать показано d статье «Как открыть ссылку в новом окне«.

Всё, вставленная ссылка рабочая. Как это проверить? Для этого идём в папку, где сохранён файл index. Находим файл, нажимаем по нем правой кнопкой мыши и выбираем «Открыть с помощью», выбираем любой браузер Mozilla, Chrome и т.д. Страница откроется так, как она будет открываться у посетителя сайта. Кликнув по ссылке легко убедиться, что она рабочая.

И в заключении рассмотрим, как улучшить дизайн страницы с помощью фона. Для этого идем в меню, нажимаем «Формат», «Цвета и фон страницы», отмечаем поле «Использовать цвета», нажимаем на окошко «Фон».

Выбираем цвет и нажимаем «Ок». Получилась окраска не только фона, но и всей подписной страницы. Далее нажимаем правой кнопкой мыши по подписной странице, «Выделить таблицу», «Таблица». Снова нажимаем правую кнопку и выбираем «Свойства таблицы», открывается окно настройки таблицы (скрин 5), нажимаем на «Цвет фона», выбираем, например, белый и «Ок». Как видим, есть выбранный фон, а подписная страница осталась белой (скрин 7).

Таким же образом можно переделывать чужие подписные или продающие страницы под себя, для этого достаточно загрузить файл index другого одностраничника в программу Композер. Далее последовательно изменяете текст, ненужные картинки вырезаются и вставляются свои, изменяются ссылки, корректируется дизайн. Если Вы захотите сделать свою подписную или продающую страницу с помощью программы Kompozer, Вы можете скачать мой видео-курс «Как сделать подписную страницу новичку» или купить платный курс за символическую цену «Как создать подписную и продающую страницу за три шага новичку«.

После завершения всех работ, папка, которая была создана для нашей подписной (продающей) страницы закачивается на сайт (блог), например, через FTP.

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