Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Как сделать всплывающую подсказку?
Приветствую всех читателей проекта Сайт с нуля! Сегодня мы будем разбирать тему всплывающих подсказок. Как добавить всплывающую подсказку к изображению и тексту? Оказывается очень просто...
Для тех, кто еще не понял о чем речь, объясняю подробнее. Всплывающая подсказка представляет собой дополнительное текстовое сообщение, которое появляется при наведении курсора на изображение либо часть текста (слово, фраза). Рассмотрим добавление всплывающих подсказок для html-сайтов, написанных самостоятельно либо созданных с помощью программы WebPageMaker.
Начнем с изображений. Можно добавить стандартную подсказку без применения стилей CSS, она будет выглядеть как стандартный текст в тонкой рамочке. А можно добавить всплывающую подсказку, появляющуюся внизу изображения на затемненном фоне. Первый вариант самый простой и не требует абсолютно никаких особых знаний и умений.
Второй вариант чуть сложнее, так как подразумевает некоторые минимальные настройки, например, вы можете с помощью стилей указать цвет фона всплывающей подсказки и цвет шрифта. Но такая подсказка и смотрится намного эффектнее, чем стандартная. При наведении курсора на изображение, нижняя часть изображения затемнится полупрозрачным фоном с текстом подсказки, в котором можно разместить описание данного изображения.
Начнем с простейшего решения без применения CSS. Добавление подсказки таким методом происходит с помощью атрибута title тега <img>. В качестве подсказки используется текстовая строка, заключенная в кавычки.
<p><img src="images/tri_dorogi.jpg" alt="Выбор пути" title="Какую дорогу выбрать?"></p>
Вот такой одной строчки кода, добавленной между тегами <body> достаточно, чтобы при наведении курсора на картинку всплывала подсказка. Что в этой строчке вам надо изменить? Прежде всего это название картинки, у меня она называется tri_dorogi.jpg, вы вместо него вписываете название своей картинки.
Далее указываете альтернативное описание картинки, то есть то, что увидит пользователь в случае, если картинка не загрузилась, у меня это "Выбор пути". И последнее - это текст самой подсказки, вместо "Какую дорогу выбрать?" вы вписываете свою подсказку.
Как это выглядит в действии легко увидеть наведя курсор на изображение. Сразу под курсором появляется подсказка.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Всплывающая подсказка</title>
</head>
<body>
<p><img src="images/tri_dorogi.jpg" alt="Выбор пути" title="Какую дорогу выбрать?"></p>
</body>
</html>
Теперь давайте посмотрим, как это реализуется в WebPageMaker. Загружаем на рабочее поле нужную картинку, кликаем по ней ПКМ и в открывшемся контекстном меню заходим в последний пункт "Свойства". Там во вкладке Изображение, в поле Подсказка вписываем текст, который будет всплывать при наведении курсора на данное изображение.
Как видите, программа WebPageMaker, при всей своей простоте, позволяет нам легко за пару кликов добавлять подсказки к любым изображениям. Результат посмотрите на картинке ниже с тремя медвежатами.
Так, с картинками разобрались, теперь давайте посмотрим, как добавить всплывающую подсказку к тексту. Не поверите, но сделать это также просто, как и в случае с картинкой. Добавить всплывающую подсказку к тексту мы можем при помощи одной строчки кода, размещенной между тегами <body> в нужном месте страницы.
<span title="Морковь">Сидит девица в темнице, а коса на улице. </span>
Наведите курсор на текст загадки ниже и посмотрите результат - появится ответ к загадке.
Сидит девица в темнице, а коса на улице
Теперь реализуем это в WebPageMaker. Как вставить строку с кодом в нужное место страницы без экспорта? Легко и просто... Копируем строчку с кодом, идем во Вставку → html-код и вставляем данную строчку в поле редактора. Затем размещаем код в нужном месте страницы, у меня на рабочем поле выглядит это так:
А можно сделать так, чтобы ответ к загадке, взятой как пример любого текста, всплывал при наведении на кнопку "Ответ", размещенную рядом с загадкой.
Отгадай: "В каком слове 5 букв "е" и никаких других гласных?"
В данном случае кнопка "Ответ" является изображением, поэтому используем здесь строку кода для подсказок к картинкам. Единственный минус таких подсказок это то, что мы не можем настроить их расположение в каком-то определенном месте картинки, они всплывают под курсором и их внешний вид довольно прост - обычный текст в тонкой рамке.
Кого устраивают такие подсказки - применяем на практике, кого не устраивает столь примитивный вид всплывающей подсказки, ждем следующего материала, в котором будет рассматриваться оформление всплывающих подсказок с помощью стилей CSS.
На этом пока все, до скорой встречи! С ув. Светлана (SvetLana_TSV)
Не забудь заглянуть в свою почту и подтвердить подписку!