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

Режим просмотра и редактирования

Посмотрите на набор вкладок внизу страницы: Normal (Нормальный), HTML Tags (Теги HTML), Source (Исходный код) и Preview (Предварительный просмотр). Normal позволяет работать в среде WYSIWYG. Открыв вкладку HTML Tags, вы увидите теги, с помощью которых определяется содержимое вашей страницы. Перейдя на вкладку Source (Исходный код), вы поймете, как выглядит код вашей страницы на языке HTML. Preview (Предварительный просмотр) позволяет увидеть, как будет выглядеть сама веб-страница.Вкладки Normal и Preview выглядят практически идентично.Теперь, когда вы знаете, как добавлять простой текст на веб-страницу, следует добавить в веб-дизайн немного собственного дизайна.

Простая веб-страница с черным текстом на белом фоне вряд ли привлечет много посетителей. Если кто-то и зайдет на нее, он не останется там надолго. Простой способ улучшить дизайн веб-сайта — изменить шрифт и, возможно, добавить пару гиперссылок.
Давайте вначале изменим кегль текста. Выберите текст, на панели инструментов Text Formatting (Форматирование текста) три раза щелкните по кнопке Larger Text Font (Больший кегль шрифта).
Щелкните по кнопке Choose Colour for Text (Выбрать цвет текста) и выберите новый цвет. Старайтесь не использовать синий цвет — он ассоциируется с гиперссылками.

Гиперссылки (ссылки)

Гиперссылки на веб-странице позволяют реализовать концепцию Всемирной паутины. Она называется паутиной, так как страницы, связанные между собой, представляют собой, по сути, паутину. При добавлении гиперссылки, или ссылки, вы используете данный подход.
Чтобы создать гиперссылку, поместите курсор под таблицей на вашей странице. Затем выберите Insert\Link (Вставить\Ссылка). Введите отображаемый текст ссылки и местонахождение веб-сайта. В области Target (Цель) окна Link Properties (Свойства ссылки) укажите, будет ли ссылка открыта в новом окне или во фрейме. Если не отметить пункт Link Is То Be Opened (Ссылка должна быть открыта), новая страница заменит старую в окне браузера. Настроив ссылку, щелкните по кнопке ОК.

Ссылки на страницы на вашем веб-сайте

Веб-сайты состоят из нескольких страниц. Чтобы пользователи могли перейти на другие страницы сайта, на нем должно быть навигационное меню со ссылками. При создании веб-сайта лучше всего хранить все файлы в одной папке. Тогда легче создавать на них ссылки. В разделе Link Location (Адрес ссылки) в окне Link Properties есть значок с папкой (Folder), который позволяет выбрать другие файлы на диске. Так можно создать ссылки на уже созданные страницы. Некоторые дизайнеры сразу создают все страницы сайта, поэтому таким образом можно организовать систему навигации по сайту. Кроме того, дизайнеры обычно хранят все изображения в одной папке, которая, как правило, называется Images. При вставке изображений они выбирают их непосредственно в папке Images. При загрузке файлов на сайт копируются файлы HTML и папка Images, чтобы путь к изображениям оставался неизменным

Как вставить изображение на страницу?

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

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

Перед вами появится окно Свойства изображения :

Просмотр страницы в браузере

Установите браузер-просмоторщик: Инструменты → Настройки , вкладка Приложения :
Чтобы просмотреть полученную страницу в браузере, нажмите кнопку Просмотр .

Вставка гиперссылок

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

Простая ссылка состоит из двух частей: текста, который выделяется (чаще всего подчеркиванием) на фоне остального текста, и адреса (URL) документа, на который ссылаются.

Для создания ссылки в меню Вставить предусмотрен пункт Ссылка, а также кнопка Связь на панели инструментов. В появившемся окне на вкладке Ссылка в поле Исходный текст ссылки вводится текст (если перед созданием ссылки текст был предварительно выделен, то он автоматически будет занесен в это поле), а в поле Ссылка на вводится URL файла. Для выбора файла, на который будет указывать ссылка, служит окно Прицепить файл, которое появляется после нажатия на кнопку Обзор файлов.

Если же требуется сослаться не на начало документа, а на его другую часть, то это место предварительно следует отметить. Для этого установите курсор в нужное место и выберите пункт Цель из меню Вставить, либо нажмите кнопку Цель на панели инструментов; в появившемся окне введите имя метки (латиницей), например, part1.

Имя метки непосредственно не отображается в окне ввода текста, но в том месте текста, где установлена метка (якорь, anchor) появляется маленькое изображение мишени, при подведении к которому курсора в статусной строке появляется имя метки.

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

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

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

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

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

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

Создание гиперссылки с помощью KompoZer
Создание гиперссылки с KompoZer.
Снимок экрана любезно предоставлен Джоном Мореном

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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