Эта статья – является приложением к циклу статей про установку MaxSite CMS на сервер хостера. В ней читатель найдет урок по созданию шапки сайта с помощью предварительной установке компонентов сайта в дистрибутив движка.
Статья не обязательна к прочтению, так как про создание собственных шаблонов из чужих я рассказываю в рубрике Как сделать свой шаблон.
В данной статье в качестве примера используется шаблон default, который каждая бесплатная система управления сайтом MaxSite содержит в комплекте поставки. Сам по себе шаблон default позволяет сразу создать сайт с внешним оформлением (дизайном), который вы можете посмотреть на сайте //templates.wbloger.com/. Еще более разноцветные шкурки для сайтов, содержащиеся в шаблоне default можно увидеть на картинках в статье Шаблон default.
Если для сравнения вы посмотрите на дизайн этого сайта //design-for.net, то заметите, что я отказался от всех красивостей, что позволило создать собственный (максимально серенький) дизайн. Кроме того, что я отменил карусель (слайдер) картинок в шапке, я сменил саму картинку в шапке. Собственно о смене картинки в шапке и пойдет речь в статье.
Меняющаяся картинка в шапке сайта отключается после установки движка, но как вы понимаете, прежде чем отключать слайдер, лучше иметь собственную заставку на сайт, которой можно заменить фотографии фруктов в шаблоне default.
Я предлагаю вам урок по установке в шаблоне сайта произвольной картинки для шапки. Раз вы находитесь на моем сайте, то я предлагаю взять в качестве примера картинку-идею с юным веб мастером в песочнице из шапки этого сайта.
Смена картинки в шапке сайта - стандартная процедура при создании своего шаблона из любого другого шаблона. Научившись на шаблоне default, вы смело можете ломать шаблоны других разработчиков.
Смена картинки в шапке сайта
1.1. Условие урока:
1. Имеем шаблон default (в принципе - любой), установленный в дистрибутив maxsite cms системы бесплатно.
2. Цель - добавить свою картинку в шапку сайта еще на этапе установки движка.
1.2. Следом встает вопрос: как создать заставку сайта?
1.3. Во-первых, надо знать размер картинок, используемых в шаблоне default. Ответ мы найдем в дистрибутиве движка MaxSite CMS, который мы разархивировали в папку с именем вашего сайта (Сайт такой-то\imja-sajta). Для хранения картинок шапки там предусмотрена папка headers по адресу:
application\maxsite\templates\default\images\headers
1.4. Если кликнуть по любой картинке, то внизу мы увидим ее размер: 960 пикселей по ширине и 250 пикселей по высоте. Думаю не надо пояснять, что система примет картинки только такого размера.
1.5. Теперь - где взять?
Как правило, в Рунете картинки вырезают из ворованных фотографий (обоев). Для тех же, кто захочет нарисовать картинку самому я организовал рубрику Дизайн интернет сайта
Сегодня мы украдем картинку из шапки моего сайта.
Для этого нам потребуется такой инструмент как «Ножницы», который есть в арсенале операционной системы Windows.
1.6. Для запуска программы «Ножницы» надо пройти путь от кнопки Пуск>Все программы>Стандартные и найти значок в виде эллипса и ножниц. Достаточно кликнуть один раз, чтобы весь экран монитора покрыло полупрозрачное окно программы «Ножницы». В панели настроек выбираем «Прямоугольная область». Теперь следует нажать на «Отменить». Ярлык программы «Ножницы» удобно держать в трее.
1.7. Прочитайте инструкцию по дальнейшим действиям, потому что вам для вырезки картинки придется переместиться к шапке этого сайта, а текст при этом уйдет вниз.
Может потренироваться с «Ножницами» на тексте и не перемещаясь вверх.
Для получения точной копии картинки из шапки моего сайта не надо менять масштаб страницы.
1.8. После перемещения в начало страницы этого сайта снова запустите программу «Ножницы» и обведите мышью область экрана, в которую должна попасть вся картинка моего сайта (можно от края и вместе с меню). После того, как вы отпустите левую кнопку мыши, в окне программы появится вырезанный фрагмент экрана. Его надо сохранить через меню Файл>Сохранить как - лучше использовать формат PNG (он не портится при пересохранениях в отличие от jpeg).
Программа автоматом сохранить вырезанный фрагмент с именем Снимок.PNG в папку «Изображения» того пользователя, под учетной записью которого вы вошли на компьютер.
Найдем этот фрагмент Снимок.PNG, для чего откроем папку C:>Пользователи>Имя пользователя>Изображения.
Конечно, можно было сохранить снимок и в любую другую папку.
Как обрезать картинку
2.1. Как вы понимаете, нам надо обрезать изображение до требуемых 960 на 250 пикселей. Для этого в системе Windows имеется другой инструмент под названием Paint. Этот простой графический редактор можно запустить аналогично «Ножницам», а можно настроить через меню открытие с его помощью всех графических файлов.
2.2. Щелкаем по файлу Снимок.PNG правой кнопкой мыши и в появившемся меню выбираем Открыть с помощью>Выбор программы. Если среди рекомендуемых Paint отсутствует, то справа жмем на указатель «Другие программы».
Если значок найден - достаточно кликнуть по нему, выставить галочку в окошке «Использовать выбранную программу для всех файлов такого типа» и утвердить выбор нажатием на кнопку «OK».
Если значка Paint нет в списке рекомендованных, то нажимаем на кнопку Обзор и в списке программ ходим Paint для выделения. Ставим галочку и закрепляем выбор нажатием на кнопку «OK».
Теперь в меню каждого файла с расширением .PNG на открытие будет стоять Paint.
2.3. Открываем Снимок.PNG в редакторе Paint. Находим кнопку «Выделить». Мышью обводим нужный фрагмент изображения, сверяя размеры на нижней панели. После того, как отпустим кнопку мыши, переходим к «Обрезать».
Рис.1. Окно программы Paint
2.4. Готовое изображение надо сохранить в формате jpeg, в котором находятся все остальные картинки шапки. Имя произвольное, хотя бы smallwebmaster.jpeg.
Картинки (заставки) для собственного сайта надо хранить в подпапке Главная страница (её надо создать) в папке Сайт тако-то. Для сохранения можно указать путь путь для Paint или переместить из папки пользователя. Исходный Снимок.png можно удалить.
Проверьте еще раз размеры картинки. Если они не совпадают с требуемыми, то в Paint есть возможность растягивания до точных размеров 960 на 250 пикселей.
Установка картинки в шапку сайта
3.1. Если вы еще не установили движок maxsite на сервер, то можно нашу заставку для сайта просто скопировать в папку headers (application\maxsite\templates\default\images\headers). Тогда после установки движка она будет появляться в «карусели».
3.2. Если вы уже установили движок, то заставку smallwebmaster.jpeg надо залить при помощи ftp-клиента в серверную папку headers (application\maxsite\templates\default\images\headers).
Отключение слайдера в шапке сайта
4.1. В шаблоне default предусмотрено три способа организации заставки сайта.
4.1.1. Первый - традиционно устанавливается по умолчанию - вывод заставки в виде слайдера - image-slider.php - карусели из картинок из папки headers.
4.1.2. Второй - в виде вывода случайной картинки - image-rand.php - из папки headers.
4.1.3. Последний способ использую я на своем сайте - image-select.php - вывод выбранной постоянной картинки в шапке.
Инициатору сайта надо самому продумать вопрос организации вывода картинок в шапку сайта.
Если вас устраивает смена картинок, например, для показа нескольких ваших вариантов работ, то вам надо просто удалить все картинки, установленные по умолчанию и вместо них загрузить свои.
Для статичных сайтов и тогда, когда не требуется отвлечение внимание читателя на меняющиеся картинки в шапке сайта, больше подойдет вариант выбранной image-select.php картинки.
4.2. Как произвести настройку вывода заставки в шапке сайта вы может узнать из раздела Настройка блоков (внизу) статьи Последние вкладки по ссылке Настройка шаблона «Default».
Аналогично процедуре замены картинке в шапке происходит замена предустановленных фавиконов и логотипа на собственные. Главное, при замене - не превышать размеры установленных в шаблоне default изображений. Размеры можно узнать, заглянув в подпапки папки images (application\maxsite\templates\default\images).
Наличие уникальных фавиконов и логотипа сайта является знаком хорошего тона. Вы можете нарисовать свои фавиконы и логотип на специальных сервисах в Интернете. Логотип - это графический знак, имеющий в основе наименование сайта (наименование в виде символа). Кроме того, сайт можно иметь настоящий графический знак, «оторванный» от наименования. Его не так уж сложно нарисовать, для чего я рекомендую статьи в рубрике Дизайн интернет сайта.
Точно по такому же принципу происходит создание собственного уникального шаблона из любого другого шаблона движка maxsite.
Для дальнейшей работы над вашим сайтом вам надо изучить статью Знакомимся с административной панелью MaxSite CMS и перейти в рубрику Как сделать свой шаблон.