Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Как оформить всплывающую подсказку с помощью CSS?
Приветствую всех читателей проекта Сайт с нуля! Мы продолжаем тему всплывающих подсказок при наведении курсора на картинку или текст. В прошлом материале мы рассмотрели простейшие методы добавления подсказок с помощью одной строки кода. А сегодня мы будем учиться оформлять всплывающую подсказку поинтереснее, например, рассмотрим появление подсказки внизу изображения на затененном фоне.
Такой метод всплывающих подсказок вы неоднократно видели в галереях, в слайдерах, согласитесь, смотрится аккуратно и эффектно. Так как же сделать, чтобы при наведении курсора на картинку, нижняя ее часть затенялась и выводилась на ней подсказка? Такой эффект можно создать с помощью стилей CSS. Что понадобится при этом? Добавить небольшой участок кода в таблицу стилей и одну строку непосредственно между тегами <body>.
Ниже приводится участок кода для CSS с пояснениями к тем строкам, которые ответственны за оформление подсказки, поэтому настроить внешний вид всплывающей подсказки под себя будет совсем несложно. Достаточно изменить исходные значения на свои...
Обратите внимание, что код со стилями размещается между тегами <head>, а код самого изображения - между тегами <body>. Хотя все будет работать, даже если разместить оба кода между тегами <body>, как это сделала я :))
<head>
<style>
.photo {
display: inline-block;
position: relative;
}
.photo:hover::after {
content: attr(data-title);
position: absolute;
left: 0; right: 0; bottom: 0px; /* Положение подсказки */
z-index: 1;
background: rgba(62,62,62,0.7); /* Цвет фона и степень его прозрачности */
color: #fff; /* Цвет текста подсказки */
text-align: center; /* Выравнивание текста по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 28px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div class="photo" data-title="Подари ребенку волшебство!"><img src="images/podari_rebenku_chudo.jpg" alt=""></div>
</body>
Во второй части кода не забудьте указать название СВОЕЙ картинки и СВОЮ подсказку вместо моих! Результат смотрим ниже:
Теперь пробуем это реализовать в программе WebPageMaker. Программа позволяет автоматически вставлять нужный вам код в тело страницы, поэтому копируем вышеприведенный код, вносим в него свои изменения, прописываем текст ссылки и свою картинку.
Готовый код вставляем через меню Вставка → html-код в появившееся окно редактора и затем размещаем данный код на нужном месте страницы.
Теперь задаете окну с кодом размер вашей картинки. Для этого кликаете по нему ПКМ и в Свойствах в первой вкладке Общее прописываете размеры изображения, в моем случае это 558*446 px.
Чтобы увидеть полученный результат, можно воспользоваться предпросмотром или опубликовать страницу на хостинг, тогда ваш результат увидите не только вы, но и все ваши посетители :))
Итак, мы рассмотрели еще один способ создания всплывающей подсказки, более эффектный, чем стандартная подсказка, благодаря использованию стилей CSS.
Останется еще рассмотреть оформление ссылок такими же симпатичными подсказками, на полупрозрачном цветном фоне, но об этом уже в следующем материале. Все подписчики получат соответствующее уведомление на эл. адрес. Не пропустите!
С ув. Светлана ( SvetLana_TSV). До скорой встречи!
Скачать коллекцию романтического клипарта ко Дню св.Валентина можно по этой ссылке. Скачивание быстрое и бесплатное, без всяких файлообменников.
Не забудь заглянуть в свою почту и подтвердить подписку!