Как сделать кнопку в композере
Как добавить форму с KompoZer
Во многих случаях вы создаете веб-страницы, на которых вам нужно обрабатывать вводимые пользователем данные, такие как страница входа, создание новой учетной записи или отправка вопросов или комментариев. Пользовательский ввод собирается и отправляется на веб-сервер с помощью формы HTML. Формы легко добавлять с помощью встроенных инструментов KompoZer. Все типы полей формы, которые поддерживает HTML 4.0, можно добавлять и редактировать с помощью KompoZer, но в этом руководстве мы будем работать с текстом, текстовой областью, кнопками отправки и сброса.
Создать новую форму
KompoZer имеет богатые инструменты для форм, которые вы можете использовать для добавления форм на свои веб-страницы. Вы получаете доступ к инструментам формы, нажимая кнопку Форма или соответствующее раскрывающееся меню на панели инструментов.
Если вы не пишете свои собственные сценарии обработки форм, вам потребуется получить некоторую информацию для этого шага из документации или от программиста, написавшего сценарий.
Вы также можете использовать формы mailto, но они не всегда работают.
Добавить текстовое поле в форму
После того как вы добавили форму на страницу с помощью KompoZer, форма будет выделена на странице светло-синей пунктирной линией. Вы добавляете поля формы внутри этой области. Вы также можете ввести текст или добавить изображения, как и в любой другой части страницы. Текст полезен для добавления подсказок или меток в поля формы для руководства пользователя.
Добавить текстовую область в форму
Иногда в форму необходимо вводить много текста, такого как сообщение или поле вопросов/комментариев. В этом случае текстовое поле просто не подходит. Вы можете добавить поле формы текстовой области, используя инструменты формы.
Добавить кнопку Отправить и сбросить в форму
После того, как пользователь заполнил форму на вашей странице, должен быть какой-то способ для передачи информации на сервер. Кроме того, если пользователь хочет начать все сначала или допустил ошибку, полезно включить элемент управления, который сбросит все значения формы по умолчанию. Специальные элементы управления формой обрабатывают эти функции, называемые кнопками Submit и Reset соответственно.
Редактирование формы с помощью KompoZer
Редактировать форму или поле формы в KompoZer очень просто. Просто дважды щелкните по полю, которое вы хотите редактировать, и появится соответствующее диалоговое окно, где вы можете изменить свойства поля в соответствии со своими потребностями. Диаграмма выше показывает простую форму с использованием компонентов, описанных в этом руководстве.
Делаем сайт в KompoZer (Февраль 2021).
Table of Contents:
Возможность создать ссылку в документе, которая приведет вас к другому документу, возможно, в сети на полпути по всему миру, возможно, является одной из самых важных причин, по которой была изобретена Всемирная паутина. Эти ссылки, называемые гиперссылками, являются «H» в HTML (HyperText Markup Language). Без гиперссылок веб-интерфейс не был бы очень полезен. Не было бы ни поисковых систем, ни социальных сетей, ни баннерных объявлений (хорошо, большинство из нас может стоять, чтобы посмотреть, как они идут).
Когда вы создаете свои собственные веб-страницы, вам захочется создавать гиперссылки, а у KompoZer есть инструменты, которые упрощают добавление ссылок любого типа. Примерная страница, представленная в этом руководстве, будет содержать ссылки на другие веб-сайты в четырех категориях, на другие части одной и той же веб-страницы и для запуска сообщения электронной почты. Я начну с заголовка и четырех
H3 заголовки для каждой категории. На следующей странице мы добавим некоторые ссылки. 01 из 05
Создание гиперссылки с помощью KompoZer
Доступ к инструментам гиперссылки KompoZer осуществляется нажатием кнопки «Ссылка» на панели инструментов. Чтобы создать гиперссылку:
В большинстве браузеров по умолчанию гиперссылка будет отображаться синим подчеркнутым текстом. Вы можете применить свои собственные стили к гиперссылкам с KompoZer, но пока мы будем придерживаться базовой гиперссылки. Рекомендуется просмотреть страницу в веб-браузере и нажать на ссылки, чтобы убедиться, что они работают.
Создание привязки с помощью KompoZer
Существует другой вид гиперссылки, который приводит вас к другой части той же веб-страницы при нажатии. Эта гиперссылка называется привязной ссылкой, а область страницы, на которую вы попадаете, когда вы нажимаете эту ссылку, называется якорем. Если вы когда-либо использовали ссылку «назад к началу» внизу веб-страницы, вы щелкаете по ссылке на якорь.
KompoZer позволяет создавать привязки, на которые вы можете ссылаться, с помощью инструмента Anchor на панели инструментов.
Затем мы создадим ссылки, которые читают читателя на созданных вами якорях.
Создание навигации по страницам с помощью KompoZer
Теперь, когда у вас есть привязки на вашей странице, давайте создадим ссылки, которые будут использоваться в качестве ярлыков для этих якорей. В этом уроке я создал таблицу с 1 строкой, 4 столбцами под верхним заголовком страницы. Каждая ячейка таблицы содержит тот же текст, что и один из заголовков категорий, которые используются для разделения ссылок на странице. Мы сделаем текст в каждой из этих ячеек таблицы ссылкой на соответствующий якорь.
Создание гиперссылок на якоря с помощью KompoZer
Теперь, когда у нас есть наши привязки и текст, который мы будем использовать для навигации по страницам, мы можем превратить эти простые текстовые фрагменты в ссылки. Мы снова будем использовать кнопку «Ссылка», но на этот раз она будет работать немного по-другому.
Вы заметите, что каждый именованный якорь в раскрывающемся меню имеет перед ним знак «#». Так вы создадите ссылку на якорь в HTML. «#» Перед именем привязки сообщает браузеру, что эта ссылка приведет вас в другое место на той же странице.
Создание гиперссылки с изображения с помощью KompoZer
Знаете ли вы, что вы можете создать ссылку из изображений, а также текст? KompoZer позволяет сделать это, используя только несколько кликов. Здесь я вставил маленькое изображение значка, показывающее стрелку вверх и текст «TOP» в нижней части страницы. Я собираюсь использовать это изображение в качестве ссылки, чтобы вернуться в начало страницы.
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.
Нельзя сказать, что программа сложная в работе, все очень просто. Но для того, чтобы в будущем создавать подписные и продающие страницы за короткий промежуток времени, надо потренироваться и всё получится.
Оригинал: KompoZer, Part 2: Let’s Get Started
Автор: Paul Arnote (parnote)
Дата публикации: август 2012 г.
Перевод: Семененко В.
Дата публикации перевода: 31 октября 2012 г.
Прежде чем собирать материалы (текст, графику) для своего Интернет-проекта, необходимо определиться с тем, как он должен будет выглядеть. Конечно, не нужно все проектировать заранее, до мелочей. У вас должно быть общее видение того, какая функциональность будет присутствовать на будущем сайте. На практике часто необходимо, чтобы запланированные характеристики сайта были «гибкими», так как по ходу дела, когда будут создаваться и наполняться страницы, потребуется изменение характеристик сайта. Иногда бывает так, что необходимо удалить первоначальный набросок проекта и начать все заново.
Вот еще один пример диаграммы, на этот раз уже реального сайта PCLinuxOS Magazine. В этой блок-схеме не показано несколько страниц и ссылок, чтобы представить диаграмму в более простом и понятном виде:
При создании Интернет-проекта журнала PCLinuxOS Magazine я постарался, чтобы на нем не было «тупиковых» ссылок, ведущих в никуда. То есть, чтобы посетителю были доступны все части сайта вне зависимости от того, на какой странице он окажется. По крайней мере, я постарался так сделать для всех страниц. При создании ссылок на сторонние сайты, я сделал так, чтобы они открывались в другом окне браузера или в его вкладке. Таким образом, посетитель остается на моем сайте и может легко вернуться на него снова, когда у него возникнет для этого необходимость.
Когда план будет создан, следующим шагом является сбор и организация воедино всех элементов, которые будут составлять содержимое будущего сайта. А также нужно определиться с тем, как он должен будет выглядеть. Ниже представлен список элементов, которые не являются обязательными, но могут составлять содержимое сайта:
Теперь вы можете себе представить, насколько важно предварительное планирование. Усилия, потраченные на создание плана, стоят этого. Детально проработанная схема в будущем значительно облегчит построение самого сайта.
Создание первой страницы
В нем выберите опцию «Использовать другие цвета» (Use custom colors), затем опуститесь по списку вниз, до надписи «Фон» (Background) и щелкните левой кнопкой мыши на окошке справа от этой надписи. Откроется еще одно окно, которое является стандартным окном выбора цвета:
Самым простым способом получения нужного цвета является явное задание его значений в поле ввода Hex или же в полях Red, Green, Blue (прим. переводчика: что является равнозначным действием, так как цвет может быть представлен в шестнадцатеричном коде Hex или в десятичном коде RGB). После ввода значений, выбранный цвет отобразится в визуальном виде в окошке, расположенном под надписью «Последний выбранный цвет» (Last-picked color). Другим точным способом подбора нужного цвета является использование полосы градиента с ползунком (расположена сверху от полей ввода значений RGB).
Результатом выбора фоновой заливки страницы является изображение главного окна KompoZer, представленное ниже: 
В открывшемся окне свойств введите заголовок страницы в поле «Заголовок» (Title). Также здесь можно установить явным образом язык страницы (Language) и направление текста (Writing direction) (прим. переводчика: два последних значения являются необязательными. Особенно это касается направления ввода текста, которое по умолчанию для западноязычных стран имеет значение слева направо). Для своей страницы-примера я выбрал заголовок «Моя Домашняя Страница» (My Home Page). Конечно, вы можете озаглавить страницу для себя так, как сочтете нужным.
Введите еще немного текста на страницу. Для этого подойдет краткое вступление, говорящее о том, чем бы вы хотели поделиться со своими читателями. В результате в окне KompoZer страница примет вид, наподобие такого:
В окне «Свойства ссылки» перейдем в раздел «Цель» (Target) и установим галочку напротив надписи «Открыть ссылку в» (Link is to be opened). Проверим, что в списке выбора ниже этой надписи стоит «в новом окне» (in a new window). Эта настройка заставит браузер посетителя открыть внешний Интернет-сайт (на который указывает ссылка) в новом окне, в то время как ваш собственный останется открытым в предыдущем окне.
Повторите вышеописанный шаг для всех ссылок, которые вы ввели на страницу. В результате этих действий ваша web-страница примет вид, наподобие рисунка:
Вставка изображения
Теперь давайте вставим картинку на страницу. Дважды нажмите клавишу Enter, чтобы опуститься вниз на две строки. Потом нажмите сочетание клавиш Ctrl+B, чтобы вводимый текст был полужирного начертания и введите текст «Хоста», также без кавычек. Снова нажмите сочетание клавиш Ctrl+B, чтобы снять полужирное начертание с дальнейшего вводимого текста. И опуститесь на строку ниже, нажав клавишу Enter.
Я уже поместил заранее подготовленное изображение в папку «images», расположенную в директории будущего сайта. Поэтому мне достаточно щелкнуть по иконке «Изображение» (Image) на панели инструментов KompoZer и выбрать картинку в папке «images». В окне «Свойства изображения» (Image Properties) выбираем местоположение картинки на одноименной вкладке «Местоположение» (Location). При этом обратите внимание, что после загрузки изображения в окно надпись «Относительная ссылка» (URL is relative to page location) автоматически активируется. Это говорит о том, что вставляемая картинка находится в той же директории, что и все остальные файлы сайта. В поле «Всплывающая подсказка» (Tooltip) введите поясняющий текст, который будет появляться каждый раз, когда посетитель наведет курсор мыши на изображение. В поле «Альтернативный текст» (Alternate text) введите текст, описывающий содержимое картинки. Этот текст будет виден посетителям сайта, пока само изображение будет загружаться окне браузера (прим. переводчика: иногда пользователи отключают отображение картинок в браузере, поэтому данный альтернативный текст также полезен. Кроме того, задание альтернативного текста является одним из обязательных условий оптимизации web-страниц для поисковых машин, таких как Google или Yandex).
Размер вставляемого изображения был изменен заранее. Я всегда предпочитаю подготавливать размер вставляемых на страницу картинок. Такой подход позволяет избежать бесполезных загрузок слишком больших изображений. Но имеется и другой способ изменить размер изображения непосредственно в редакторе KompoZer. Для этого переходим на вкладку «Размеры» (Dimensions), переключаем радиокнопку со значения «Реальный размер» (Actual Size) на значение «Другой размер» (Custom Size) устанавливаем в полях ввода ширину (Width) и высоту (Height) для изображения.
При этом обязательно нужно обратить внимание на галочку «Пропорционально» (Constrain). Если она установлена (надпись активна), то размеры изображения изменяются пропорционально, что предотвращает искажение картинки. Когда все готово, щелкаем на кнопке ОК и картинка вставляется в web-cтраницу.
Когда изображение будет помещено на страницу в окне редактора KompoZer, помещаем курсор мыши рядом с ней и вводим пояснительный текст. При этом текст будет обтекать вставленную картинку с правой стороны и отступать от нее на пять пикселей. После ввода текста у вас должно получиться нечто похожее на рисунок ниже:
Осталось сохранить готовую страницу под именем index.html в директории web-сайта.
Заключение
Итак, в этой статье мы продолжили изучение HTML-редактора KompoZer, начатое в предыдущей выпуске июльского журнала PCLinuxOS. Здесь мы научились создавать простую Web-страницу. Как вы могли заметить, KompoZer является достаточно функциональной программой. В следующей статье мы продолжим знакомство с возможностями KompoZer.