Как сделать ссылку в композере
Оригинал: 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.
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.
Нельзя сказать, что программа сложная в работе, все очень просто. Но для того, чтобы в будущем создавать подписные и продающие страницы за короткий промежуток времени, надо потренироваться и всё получится.