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

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

Как добавить форму с помощью KompoZer

Kompozer упрощает добавление веб-форм на ваши веб-страницы. В этом пошаговом руководстве вы найдете инструкции по созданию веб-формы.

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

Гиперссылка — это слово или несколько слов текста, которые переводят вас на другой документ или веб-страницу, когда вы нажимаете на них. Создайте его с помощью Adobe Dreamweaver.

Источник: ru.go-travels.com

Компонент «Редактор стержней»

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

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

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

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

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

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

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

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

FusionBrain: как работать во встроенном редакторе

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Щелкните правой кнопкой мыши изображение и выберите «Свойства изображения и ссылки» в контекстной метке. Откроется диалоговое окно «Свойства изображения».
2. На вкладке «Местоположение» вы увидите имя файла изображения и эскиз, уже заполненный. Вам нужно ввести текст в поле «Альтернативный текст». Это то, что появляется, когда вы наводите курсор мыши на изображение, а также то, что читается программой чтения с экрана, когда человек с нарушениями зрения читает веб-страницу.
3. Нажмите на вкладку Ссылка. Здесь вы можете выбрать якорь из меню, как мы сделали со ссылками на якорь. Фактически, это изображение используется как якорная ссылка. Я выбрал якорь #Links_Of_Interest, который вернет нас к вершине.
4. Нажмите ОК. Изображение теперь при нажатии нажимает на верхнюю часть страницы.

Источник: gadgetshelp.com

§ 14. Создание сайта «Домашняя страница»

Рассмотрим процедуру создания простого сайта (домашней страницы) в редакторе KompoZer (версия О.8Ь3). Для начала опишем интерфейс программы и перечислим основные приемы работы с текстом, гиперссылками и графикой.

Интерфейс программы KompoZer

Интерфейс программы (рис. 2.10) состоит из следующих элементов:

1. Меню. Содержит пункты для выполнения всех операций, возможных в KompoZer.
2. Панель компоновки. Содержит кнопки наиболее часто используемых операций.

1. Панель форматирования. С помощью панели форматирования можно выбирать шрифт, менять его цвет и размер, выделять блоки текста, создавать нумерованные и маркированные списки, выравнивать текст (влево, вправо, по центру, по ширине).
2. Панель вкладок. KompoZer позволяет одновременно редактировать несколько документов, используя разные вкладки для каждого открытого документа.
3. Панель режимов редактирования показывает, в каком режиме просматривается текущий документ. Доступны режимы Дизайн, Объединенный и Код.
4. Рабочее окно. В рабочем окне происходит непосредственно создание страницы.
5. Менеджер сайта позволяет загрузить созданную страницу на сервер.

Рассмотрим работу с текстом, гиперссылками и изображениями на примере создания «Домашней страницы Пети Иванова». Для начала следует запустить программу KompoZer, после чего программа выйдет в режим создания новой wеb-страницы. Далее необходимо задать глобальные настройки страницы.

Глобальные настройки страницы

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

• выбором цвета (оттенка) из дискретной или непрерывной палитры цветов;
• получением цвета (оттенка) путем смешивания красного, зеленого и синего цветов (RGB-модель);
• формированием цвета через параметры Оттенок, Насыщенность, Яркость;

• вводом в поле Имя английского названия цвета (например: Yellow) ;
• вводом в поле Нех 16-ричного кода цвета (если он вам известен).

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

Выберем для нашего сайта черный цвет текста, коричневый цвет всех гиперссылок (Нех = #993300) и светло-желтый цвет фона (Нех = #FFFFCC).

Работа с текстом

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

После задания настроек введите нужный текст.

Помимо заголовка, добавим на страницу следующий текст:

Для данного текста выберем шрифт Verdana, размер — Medium, стиль абзаца — Обычный текст, цвет текста — черный, выравнивание — по центру.

Создание текстовых гиперссылок

• выбрать пункт Вставка ^ Ссылка (или нажать кнопку Ссылка на Панели компоновки);
• в первое поле диалогового окна ввести текст гиперссылки;
• во втором поле диалогового окна указать URL-aдpec объекта, на который указывает гиперссылка, или ввести имя файла с указанием пути к нему.

1. Мои родители (имя файла — parents.html);
2. Мои друзья (имя файла — friends.html).

После выполнения этих действий вы должны увидеть приблизительно такой вариант главной страницы, как на рис. 2.12.

Рис. 2.12. Главная страница сайта «Домашняя страница Пети Иванова»

Сохранение страницы

Чтобы сохранить созданную страницу, необходимо выбрать пункт Файл → Сохранить, выбрать нужную папку и ввести имя файла — index.html.

Просмотр кода

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

Теперь создадим вторую страницу сайта (рис. 2.13). Задавать глобальные настройки страницы, создавать заголовок и добавлять текст вы уже умеете.

Рис. 2.13. Вторая страница сайта «Домашняя страница Пети Иванова»

Попробуйте самостоятельно задать параметры страницы и создать заголовок «О себе». Затем наберите следующий текст:

Меня зовут Иванов Петя. Я родился 21 мая 2000 года в городе Перми. В 2007 году пошел в первый класс школы № 59, где и учусь в настоящее время в 7 «б» классе. Мои любимые предметы — математика и история.

Параметры заголовка аналогичны параметрам заголовка на главной странице сайта. Для текста используйте выравнивание по ширине. Остальные параметры аналогичны параметрам текста главной страницы.

Теперь добавим к тексту изображение.

Добавление изображения

• установить курсор в место вставки рисунка;
• выбрать пункт Вставка Изображение;
• с помощью вкладки Адрес задать адрес изображения либо выбрать файл с изображением с помощью кнопки Открыть;
• здесь же ввести текст всплывающей подсказки и альтернативный текст (при необходимости);
• с помощью вкладки Размеры задать размеры рисунка (если необходимо выполнить масштабирование);
• с помощью вкладки Внешний вид задать отступы от изображения до текста по горизонтали и вертикали, а также определить расположение текста по отношению к изображению;
• если рисунок должен выполнять роль гиперссылки, то с помощью вкладки Ссылка задать адрес документа, на который будет осуществляться переход.

• установите курсор в начало первого абзаца текста;
• выберите пункт Вставка ^ Изображение;
• выберите файл boy.jpg;
• введите всплывающую подсказку — «Петя Иванов» (альтернативный текст вводить не нужно);
• выберите вкладку Размеры, установите флажок Соблюдать пропорции и задайте ширину рисунка — 1304;
• выберите вкладку Внешний вид и установите отступы слева и справа — 5, а сверху и снизу — 2;
• установите расположение текста по отношению к рисунку — Влево, окружить текстом.

Далее сохраните файл под именем about_me.html. Должен получиться такой результат, как на рис. 2.13.

Просмотр результата

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

Система основных понятий

Вопросы и задания

1. Как посмотреть HTML-код документа, работая в программе KompoZer?
2. Как изображение можно сделать гиперссылкой? Перечислите основные шаги.
3. Что включают в себя глобальные настройки документа?
4. Изучите самостоятельно и опишите, как можно изменить параметры уже существующей гиперссылки (например, ее адрес).
5. Создайте две остальных страницы сайта «Домашняя страница Пети Иванова» (по аналогии со страницей «О себе»):

Мою маму зовут Елена Евгеньевна. Ей 35 лет. Она окончила медицинский институт и работает врачом-педиатром в детской районной поликлинике. Моя мама очень добрая и веселая.

Источник: tepka.ru