Как сделать сайт-визитку на Amiro CMS

Что потребуется для создания сайта:

1) хостинг и домен;

2) шаблон страниц(ы);

3) ПО (файловый менеджер, текстовый редактор);

4) скрипт для установки Amiro.CMS.

Денежные затраты — 200 рублей сразу и затем 100 рублей ежемесячно. При условии, что все работы вы будете делать самостоятельно, без привлечения специалиста.

Стадия 1 — Подготовка

Прежде, чем мы приступим к самому главному, хотелось бы напомнить, что у нас должны быть установлены некий текстовый редактор и файловый менеджер, которые могут устанавливать FTP-соединения. Примеры таких программ: Notepad++, Total Commander.

На своем локальном диске создаем папку (в удобном для вас месте).

Нам потребуется скрипт для установки движка. Его лучше скачать с официального сайта здесь. На момент написания статьи версия установщика 6.10. В дальнейшем число может увеличиться. Файл имеет расширение .php (не нужно щелкать на него и пытаться установить, как вы это делаете с приложениями в среде Windows). После загрузки копируем его в нашу папку.

Стадия 2 — Шаблон страницы

Здесь возможны варианты: шаблон можно поискать бесплатный и скачать. Можно рисовать самим. Вариант с заказом сейчас не рассматриваем, так как у нас бюджетный проект, который не должен проесть дырку в кармане, но при этом сайт должен выглядеть достойно. Поэтому каждый выкручивается как может. В силу своих знаний и умений.

Сам я не считаю себя гуру фотошопа, да и не всегда использую его при верстке. Порой проще создавать сайт с чистого листа. Верстая прям из головы. То есть, создаем в уме образ и воссоздаем его на экране. Но это не всегда реально, поэтому в данном случае я сделал в фотошопе шаблон и прикладываю его к уроку. Если пока сложно замутить собственный, можете использовать мой для своих сайтов.

Скачать его можно тут.

Что из себя представляет данный шаблон: это типовой информационный сайт, который может служить как визиткой компании, так и корпоративным сайтом. Включает в себя две полностью оформленные страницы: главную и внутреннюю. На скриншотах вы можете оценить внешний вид страниц.

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

Соответственно, если вы решили делать все самостоятельно, то после создания изображения вашей картинки в фотошопе её нужно нарезать и сверстать. На выходе должны получиться несколько файлов с картинками, один или несколько html файлов, файл(ы) стилей css и (если вы добавляли динамику или слайдеры, как в моем шаблоне), то список дополнится скриптами JavaScript.

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

Стадия 3 — Установка Амиро на хостинг

На этом этапе у вас уже должен быть хостинг и домен. Если вы раньше не сталкивались с этими понятиями, то вам сюда (внизу статьи есть ссылка на тот хостинг, которым пользуюсь я сам).

Причем, они должны быть привязаны друг к другу. При приобретении и того и другого у одного регистратора, домен автоматом привязывается к хостингу (если вы не укажете иные параметры в настройках DNS). Если вы приобрели все в разных местах, то прежде, чем вы сможете продолжить, вам необходимо будет найти DNS вашего хостинга и прописать их в панели управления доменом. Привязка занимает в среднем до 24 часов.

Хочу заметить, что нужен хостинг с поддержкой PHP и MySQL. Там, где регистрируюсь я, это самый дешевый тариф, но так не всегда. Поэтому будьте внимательны и изучайте характеристики хостинга и тарифов до оплаты услуг.

Теперь, когда хостинг и домен объединились, нам нужно подготовить еще несколько вещей и можем начинать. Прежде всего нам потребуется база данных MySQL.

Создание базы данных MySQL

Делается это очень просто. Идем в панель управления хостингом. У меня она выглядит следующим образом:

создание базы mysql

Ищем там раздел Базы данных (в данном случае, с изображением дельфина — это логотип MySQL). Заходим внутрь. Придумываем имя базы и пароль. Выписываем это в отдельный файл или на бумажку (как вам удобнее). Важно, чтобы пароль был сложным. Старайтесь избегать элементарных комбинаций (12345678, password123 и тд). Лучше всего использовать комбинацию букв и цифр, длиной не менее 10 символов. Причем использовать буквы в разных регистрах.

Настройка FTP-соединения

Установка Амиро

Стадия 4 — Подготовка к интеграции

Теперь нам нужно активировать лицензию для нашего сайта, удалить все ненужное, сделать бэкап и можем приступать непосредственно к интеграции. Что ж, пойдем по порядку.

Активация лицензии Амиро.FREE

Чтобы исчезла надпись об окончании лицензии, нам нужен ключ. Его можно получить на сайте Амиро по адресу www.amiro.ru/members/keys

Для получения доступа к данной странице придется пройти регистрацию в системе Амиро. Это не сложнее, чем завести ящик на Яндексе, так что проблем возникнуть не должно.

На странице генерации ключей вы увидите поле ввода, куда нужно прописать ваш домен и система сгенерирует ключ. Копируем его в буфер обмена и отправляемся в админку нашего сайта. Нам нужен раздел Сервис — Активация лицензии. Там по-умолчанию есть какой-то ключ. Удаляем старый и вставляем тот, что только что сгенерировали. Нажимаем кнопку Активировать лицензию. Если все сделано правильно, надпись о истечении лицензии должна исчезнуть.

Зачистка движка

Как вы могли уже заметить, после установки сайт уже имеет некоторый контент. Нам он не пригодится, поэтому его нужно тщательно зачистить. Конечно, всегда остается вероятность, что удалится что-то нужное. Если вы сомневаетесь, что можно удалять, а что не стоит, лучше сперва выполните следующий пункт — Бэкап, а затем вернетесь к текущему.

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

Создание резервной копии или по-просту бэкап

В Амиро сделать копию сайта очень просто и быстро. Для этого идем в раздел меню Сервис и там ищем Резервное копирование. Затем по очереди создаем архив и дистрибутив сайта. Для удобства можете заполнить описание (к примеру, написав там «пустой движок, перед интеграцией»), чтобы потом можно было вспомнить, что именно было в данном архиве.

Когда мы создали бэкап, отправляемся в наш файловый менеджер и копируем резервные копии сайта к себе на локальный жесткий диск. Это нужно для того, чтобы предостеречь себя от всевозможных проблем с хостингом и падений (взломов) сайта. Если с нашим сайтом что-то произойдет, мы сможем возродить его на другом хостинге в кратчайшие сроки. При этом понадобится лишь дистрибутив и установщик Амиро.

По умолчанию бэкап лежит в папке [ваш домен/_shared/sys/var/backup].

Стадия 5 — Интеграция дизайна в движок

Чтобы справиться с этим разделом, нужно четко представлять, как устроена страница и понимать структуру html-документа. Потому что возможны случаи, когда в процессе работы удаляется какой-то символ и весь код разом рушится. К этому надо быть готовым всегда. И держать под рукой бэкап на тот случай, если ошибку вычислить своими силами не получается.

Макеты страниц

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

Мы же отправляемся в раздел меню Менеджер сайта и там находим Макеты страниц. По-умолчанию там уже есть несколько. Их мы трогать пока не будем (потом можно будет удалить все лишнее). Нам нужно создать новый. Для этого в форме внизу начинаем заполнять имеющуюся информацию. Можно сперва просто ввести название и нажать на кнопку Применить. После чего продолжить работу с уже созданным макетом.

Изначально макет выглядит так:

<!--Начало страницы - блок HEAD-->
##init##
<body leftmargin=0 topmargin=0>
<!--Скрипт статистики в скрытом блоке-->
<div id=stat>##stat_agent##</div>
<table cellspacing=0 cellpadding=0 border=0 width=100% height=100%>
<tr><td valign=top id=lay_f1 height=100>
<!--Верхний информационный блок (заголовок) страницы-->
##lay_f1_body##
</td></tr>
<tr><td valign=top id=lay_body height=100%>
<!--Блок системных статусных сообщений-->
##status_messages##
<!--Основной информационный блок (тело) страницы-->
##lay_body_body##
</td></tr>
</table>
</body>
<!--Конец страницы и закрывающие теги HTML-->
##end##

Как мы видим, это табличная верстка. Мне таблица не нужна, у меня все на блоках, поэтому я убиваю всё лишнее, оставляя только необходимые элементы.

<!--Начало страницы - блок HEAD-->
##init##
<body>
<!--Скрипт статистики в скрытом блоке-->
<div id=stat>##stat_agent##</div>
<div id=lay_f1>
<!--Верхний информационный блок (заголовок) страницы-->
##lay_f1_body##
</div>
<div id=lay_body>
<!--Блок системных статусных сообщений-->
##status_messages##
<!--Основной информационный блок (тело) страницы-->
##lay_body_body##
</div>
</body>
<!--Конец страницы и закрывающие теги HTML-->
##end##

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

Смысл в том, что <div id=lay_f1></div> — это обёртка содержимого блока. Всего может быть 8 различных блоков: f1, f2…f8 и девятый lay_body — это контент страницы. В этот блок помещаем самую важную информацию.

В свою очередь, ##lay_f1_body## — это содержание блока <div id=lay_f1></div>. Сейчас мы должны выстроить лишь общий вид страниц, поэтому нужно аккуратно отделить внешнюю оболочку нашего шаблона (основные блоки — шапка, подвал, контент) от информации (блоков новостей, статей и пунктов меню).

Уже на первых секундах интеграции мы видим, что нашу верстку придется существенно переработать в процессе интеграции. Ведь я использовал id, а теперь они дублируются с id Амиро, чего допускать категорически нельзя. Поэтому я начинаю править верстку.

В итоге мой макет выглядит следующим образом:

<!DOCTYPE html>
##init##
<body id="home">
<div id=stat>##stat_agent##</div>
<div id="wrapper">
    <div id="content">
        <div id=lay_f1 class="header">
            ##lay_f1_body##
        </div>
        <div id=lay_f2 class="bannerContainer">
            ##lay_f2_body##
        </div>
        <div id="divider"></div>        
        <div id="lay_f3" class="lowerNavigation lowerContent">
            ##lay_f3_body##
        </div>    
        <div id=lay_body class="lowerContent">
            ##status_messages##
            ##lay_body_body##
        </div>        
    </div>
</div>
<div id=lay_f4>
##lay_f4_body##
</div>    
</body>
##end##

Часть id пришлось заменить на классы, что-то вообще удалил.

Названия секторов: основной блок — контент, 1 — шапка, 2 — слайдер, 3 — меню, 4 — подвал.

Стили макета

Каждый макет в Амиро имеет несколько закладок, где прописаны стили страницы. Вы можете работать непосредственно из макета. Править там стили и добавлять что-то новое в закладке CSS пользователя. Однако, мне так работать неудобно, поэтому я использую другой подход: выношу все стили во внешний файл и прописываю путь к нему в шапке.

У меня уже есть заготовка. Вам будет сложнее: нужно создать в вашем текстовом редакторе новый файл стилей. Скопировать туда содержимое всех закладок стилей Амиро (по очереди добавляя содержимое каждой из закладок в один и тот же файл). В завершение нужно открыть файл стилей нашей заготовки style.css и скопировать содержимое файла в конец документа.

Что в итоге должно получиться: в макете есть 5 закладок. Три со стилями, сам макет и код шапки. Закладки со стилями мы очищаем (удаляем там всё, если вы уже создали и сохранили внешний файл стилей). С макетом мы закончили. А в код шапки добавляем следующие строки:

<link href="styles.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<![endif]-->
<script src="js.js" type="text/javascript"></script>

Естественно, у вас файлы могут называться иначе и иметь иное расположение.

Наполнение страницы

Следующий шаг — это практически копи-паст. Нужно взять наш шаблон из 2 стадии и вставить содержимое тех блоков, которые мы использовали в макете в качестве контейнеров для данных, на место. Единственное, что: мне пришлось изменить структуру шаблона, чтобы врезать его в Амиро, поэтому простым копи-пастом дело не закончилось. Пришлось допиливать стили, вылавливать измененные id, заменять на стили. Чистить код и так далее.

Но, такое нужно делать не всегда. В данном случае я специально взял шаблон, сверстанный на id, а не на классах, чтобы можно было уловить разницу и почувствовать все тонкости интеграции в Амиро.

Краткий видео обзор о работе с макетом в Амиро.CMS

Итак, мы создали первый макет. Следующем уроке данный макет будет полностью интегрирован в Амиро. Мы научимся настраивать меню и прочие функции, что позволит нам избежать ручной работы во многих случаях и упростить работу с сайтом.

Понравилась статья? Расскажи о ней друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *