Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Адаптивный (резиновый) фон для сайта
Приветствую всех посетителей сайта! Сегодня мы будем рассматривать простую технику создания адаптивного фона, который будет полностью растягиваться на всю ширину окна браузера. То есть, при изменении пропорций окна браузера будут меняться и пропорции фонового изображения сайта.
В настоящее время очень популярно в веб-дизайне использование в качестве фона большой картинки или фотографии, которая занимает весь первый экран. Обычно, в верхней части такого изображения размещают меню, логотип, контакты, а основной контент начинается сразу под фото. Как вариант - использование полноэкранных адаптивных слайдеров, подстраивающихся под размеры экрана пользователя.
Для фона рекомендую подобрать качественное изображение высокого разрешения, чтобы на широкоформатных мониторах не происходило его масштабирование. Ведь если фоновая картинка на широкоформатном мониторе окажется меньше размера элемента body, каковым является "тело" вашего сайта, браузер автоматически масштабирует картинку до нужных размеров, а это чревато появлением пикселизации.
В примере я использую изображение размером 3600 Х 2400рх. Исходный вес картинки 2,18 МБ (а это очень много!) я оставила без изменений, чтобы вы смогли убедиться, что "тяжелые" изображения медленнее загружаются, особенно на мобильных устройствах. Поэтому специально для мобильных гаджетов мы будем использовать второй вариант изображения - более малого размера и веса, например, 768 Х 505 рх.
Подключается малое изображение с помощью медиа-запросов, в которых мы задаем максимальную ширину экрана мобильных устройств, в моем примере она 767рх. То есть, на маленьких экранах до 767рх включительно, будет отображаться меньшее изображение (в целях экономии мобильного трафика и увеличения скорости загрузки), а на экранах размером свыше 767рх будет показываться оригинальное изображение.
И малое, и большое изображения обязательно перед использованием оптимизируйте, уменьшите их вес в одном из онлайн-сервисов. Это займет не больше минуты и позволит "сжать" фото по весу в несколько раз.
Перед тем, как приступить к установке адаптивного фонового изображения, в качестве примера приведу несколько сайтов, где вы можете посмотреть принцип работы адаптивного фона. Изменяйте размер окна браузера и увидите, как меняется фоновая картинка.
Не забудь заглянуть в свою почту и подтвердить подписку!
http://www.kingshillcars.com/
http://www.stpaulsschool.org.uk/
http://www.illy.com
Существует два способа "превращения" обычного изображения в растягиваемое: с помощью Js и с помощью CSS. Мы рассмотрим второй вариант, так как он позволяет обойтись без сторонних скриптов, всего лишь используя свойство CSS: background-size.
Данное свойство управляет размером изображения и устанавливается в процентах. Если мы в стилях укажем background-size: 100% , это растянет изображение по ширине на всё окно браузера независимо от его размера.
Чтобы фоновая картинка автоматически подстраивалась также и под высоту вкладки, обычно в background-size после 100% дописывают auto. Данный атрибут отвечает за вертикальное размещение картинки, то есть за её высоту.
В спецификации CSS3 появилось новое свойство cover, которым можно заменить процентный размер картинки фона, в таком случае строка будет иметь вид background-size: cover. Для корректного отображения фона в популярных браузерах можно добавить специальные префиксы:
-o-background-size: cover;
-webkit-background-size:cover;
-moz-background-size: cover;
Теперь давайте подробнее остановимся на свойствах CSS:
body {
/* Здесь прописываем путь к фоновому изображению */
background-image: url(images/big-photo.jpg);
/* Этой строкой задаем центрирование картинки по горизонтали и вертикали */
background-position: center center;
/* Отменяем повтор изображения */
background-repeat: no-repeat;
/* Запрещаем прокрутку фона при скроллинге, фон будет всегда фиксированным */
background-attachment: fixed;
/* Даем команду подстраиваться картинке под размер контейнера */
background-size: cover;
/* Указываем цвет фона, пока картинка загружается */
background-color:#464646;
}
Все вышеперечисленные свойства можно записать одной строкой. Краткая запись в таком случае будет иметь вид:
background: url(images/big-photo.jpg) center center cover no-repeat fixed;
Для медиа-запросов добавим следующую запись:
@media only screen and (max-width: 767px) {
body {
background-image: url(images/small-photo.jpg);
}
В заключение давайте повторим еще раз те шаги, которые нужно сделать для установки адаптивного фонового изображения.
1. Подобрать подходящее качественное изображение высокого разрешения (для декстопов) и пропорционально его уменьшить в любом графическом редакторе, к примеру, до 767рх (для маленьких экранов). Загрузить оба изображения в папку images на сервере.
2. Создать файл стилей, вписать в него свойства, которые мы рассмотрели выше и загрузить его в корневую папку. Можно просто добавить эти свойства в общий файл стилей сайта. Проследить, чтобы путь к изображениям был прописан правильно.
3. На странице между тегами <head> и </head> подключить созданный файл стилей и прописать метатег viewport для задания видимой области страницы:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="fon/responsive-full-background-image.css">
Здесь также важно указать правильный путь к файлу стилей - папку, в которой он размещен на сервере и его полное название (выделено синим цветом).
4. Проверить результат в браузере, изменяя размеры окна.
Вот таким нехитрым способом можно реализовать установку адаптивного фона на любом сайте. Изображения, используемые в примере, и полный файл стилей вы найдете в архиве. Для фона можно использовать не только фотографии, а любое изображение, пригодное для этих целей, например, созданный самостоятельно в фотошопе из паттерна абстрактный или геометрический фон, скачанный понравившийся фон из Интернета.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат огромный пак круглых элементов-заготовок стоимостью 12$, которые можно использовать для создания стикеров, бейджей, рамок, логотипов, вырезов и т.д. Область их применения ограничивается лишь вашей фантазией. Это одна из моих любимых рабочих коллекций:))
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!