1

Тема: Сам себе веб-мастер

Всем привет!

Открывается проект, предназначенный именно для новичков. Называется проект «Сам себе веб-мастер» и посвящен созданию сайтов на движке My Engine. Все материалы основаны на личном опыте, который позволяет создавать такие сайты. Сам проект создан на My Engine и написанных специально для него расширениях.

Одна из основных задач проекта – ликвидировать недостаток справочной информации по движку. Тот, кто только начинает работать с My Engine, найдет все, что нужно знать о движке для начала создания своего сайта.

Опытным программистам и вебмастерам, скорее всего, этот проект будет не очень интересен. Здесь нет и не будет обсуждения технических тем, объяснений того, что и как работает. Только информация о готовых решениях, описание того как их можно использовать для создания сайтов с получением 100% результата, абсолютно не заморачиваясь на том, как это все работает.

Основные разделы проекта:
Главная страница – http://sam-sebe-web-master.3shaga.ru
Подготовительный этап - http://sam-sebe-web-master.3shaga.ru/po … elnyy_etap
Строительство сайта - http://sam-sebe-web-master.3shaga.ru/stroitelstvo_sayta
Бесплатные шаблоны - http://sam-sebe-web-master.3shaga.ru/be … e_shablony
Бесплатные плагины - http://sam-sebe-web-master.3shaga.ru/be … ye_plaginy
Платные плагины - http://sam-sebe-web-master.3shaga.ru/platnyye_plaginy

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

2

Re: Сам себе веб-мастер

Отличная работа, ты молодец!!!

3 (2019-02-17 07:00:21 отредактировано gpc66)

Re: Сам себе веб-мастер

Подключаем модуль "Навигация по сайту" (Хлебные крошки) https://sam-sebe-web-master.3shaga.ru/p … readcrumbs к любому шаблону.

В шаблон нужно вставить код вывода

<?php if(!$Page->isIndexPage()  && is_dir('./modules/breadcrumbs')){
require('./modules/breadcrumbs/integration_page.php');
}?>

Выводится будет на всех страницах, кроме главной.

В таблицу стилей своего шаблона вставляете стили модуля

#breadcrumbs{
max-width:100%;
margin:0;
margin-top:20px;
padding:0 15px;
overflow:hidden;
font-size:13px;
text-align:left;
}
#breadcrumbs a{
color:#FF7300;
}
#breadcrumbs a:hover{
text-decoration:none;
}
#breadcrumbs span{
width: 10px;
height:10px;
margin:0;
padding:0;
display:inline-block;
background:url(/modules/ваш_шаблон/images/arrow-br.png) 0 0 no-repeat;
}

Разделитель ссылок arrow-br.png можно скачать по ссылке http://td1.td0.ru/modules/creative_styl … row-br.png, поместите скаченный файл в папку шаблона и пропишите до него путь в стилях.

Всё, загрузите модуль и он будет работать на вашем сайте.

4

Re: Сам себе веб-мастер

этот код делает тоже самое. При использовании такого варианта кода можно абстрагироваться от путей расположения папок. И то и то верно и будет работать, дело вкуса

<?php if(!$Page->isIndexPage()  && Module::exists('breadcrumbs')){
require(Module::pathRun('breadcrumbs', 'integration_pages'));
}?>

5 (2019-02-17 09:14:53 отредактировано gpc66)

Re: Сам себе веб-мастер

Подключаем модуль "Слайд-шоу"  https://sam-sebe-web-master.3shaga.ru/p … iny/slider к любому шаблону. Обычно, большие слайд-шоу на сайтах выводятся ниже шапки, поэтому находите в коде своего шаблона такое место и вставляете туда код вывода слайдера.

<?php if($Page->isIndexPage() && is_dir('./modules/slider')){
require('./modules/slider/integration_page.php');
}?>

или

<?php if($Page->isIndexPage() && Module::exists('slider')){
require('./modules/slider/integration_page.php');
}?>

Слайд-шоу будет выводиться только на главной странице сайта.

В таблицу стилей своего шаблона вставляете стили модуля.

.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider a img { outline: none; border: none; }
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
.flexslider {
position: relative;
zoom: 1;
padding:0;
}
.flexslider .slides { zoom: 1; }
.flexslider .flex-direction-nav a {
display:none;
}
.flexslider:hover .flex-direction-nav a {
display: block;
position: absolute;
margin: -50px 0 0 0;
width: 50px;
height: 100px;
top: 50%;
cursor: pointer;
text-indent: -9999px;
}
.flexslider .flex-direction-nav .flex-next {
right:20px;background: url(/modules/ваш_шаблон/images/button-next.png) no-repeat;
}
.flexslider .flex-direction-nav .flex-prev {
left:20px;background: url(/modules/ваш_шаблон/images/button-prev.png) no-repeat;
}
.flexslider .flex-control-nav {
display:none;
}

Кнопки для пролистывания слайдов button-prev.png и button-next.png можно скачать по ссылкам

http://td1.td0.ru/modules/generic_green … n-prev.png
http://td1.td0.ru/modules/generic_green … n-next.png

Загрузите эти файлы в папку images вашего шаблона и в стилях пропишите путь до этих файлов.

Для работы слайдера необходимо подключение библиотеки jquery, если в вашем шаблоне такая библиотека не подключена, то между тегами <head></head> своего шаблона вставьте такой код.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

После загрузки и инициализации модуля он начинает работать сразу в демо режиме.

6

Re: Сам себе веб-мастер

Подключаем модуль "Главное меню" https://sam-sebe-web-master.3shaga.ru/p … aginy/menu к шаблону. Рассмотрим это на примере дефолтного шаблона. Открываем файл шаблона, находим такой код и заменяем на новый.

<div class="container">
        <header>
            <div class="user_menu">
                <?php
                    if($User->authorized){
                        echo'<a href="/user" class="user">'.$User->login.'</a>';
                    }else{
                        echo'<a href="/user" class="in">Вход</a><a href="/user/reg" class="reg">Регистрация</a>';
                    }
                ?>
            </div>
            <h1><a href="/"><?php $page->get_header();?></a></h1>
            <div class="slogan"><?php $page->get_slogan();?></div>
            
            <div class="hbr_menu">
                <a href="javascript:void(0);" id="menu" class="button">Меню</a>
            </div>
            
            

            <nav id="nav">
                <?php $page->get_menu('span');?>
            </nav>

            <div class="search">
                <form name="search" action="/search" method="post">
                    <input type="text" name="q" value="" placeholder="Поиск...">
                </form>
            </div>

            
            
            
            
        </header>
    </div>

заменяем на

<div class="container">
<header>
<div class="user_menu">
<?php
if($User->authorized){
echo'<a href="/user" class="user">'.$User->login.'</a>';
}else{
echo'<a href="/user" class="in">Вход</a><a href="/user/reg" class="reg">Регистрация</a>';
}
?>
</div>
<h1><a href="/"><?php $page->get_header();?></a></h1>
<div class="slogan"><?php $page->get_slogan();?></div>            
</header>
</div>

<div class="container">    
<?php if(Module::exists('menu')){?>
<nav id="navigation">
<a href="#" class="nav-btn">МЕНЮ<span class="arr"></span></a>
<ul id="big-menu">
<?php require('./modules/menu/integration_page.php');?>
</ul>
<div class="search_">
<form name="search" action="/search" method="post">
<input type="text" name="q" value="" placeholder="Поиск...">
</form>
</div>
</nav>
<?php }?>
</div>

В низу шаблона заменяем код

<script>
document.getElementById('menu').onclick = function(){
    var menu = document.getElementById('nav');
    var sidebar_menu = document.getElementById('sidebar_menu');
    if(menu.style.height == menu.scrollHeight + 'px'){
        menu.style.height = '0px';
        sidebar_menu.style.height = '0px';
    }else{
        menu.style.height = menu.scrollHeight + 'px';
        sidebar_menu.style.height = sidebar_menu.scrollHeight + 'px';
    }
}
</script>

заменяем на

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$('#navigation ul#big-menu li:first-child').addClass('first');
$('.footer-nav ul li:first-child').addClass('first');
mobile();
$(window).on('resize', function() {
mobile();
});
$('#navigation a.nav-btn').click(function(){
$(this).closest('#navigation').find('ul#big-menu').slideToggle()
$(this).find('span').toggleClass('active');
return false;
});
});
function mobile() {
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if (w > 1024) {
$('#navigation ul#big-menu').show()
}else{
$('#navigation ul#big-menu').hide()
$('#navigation a.nav-btn span.arr').removeClass('active');
}
}
</script>

В таблицу стилей вашего шаблона загружаем стили меню.

.search_{position:absolute;right:10px;bottom:9px}
.search_ input{width:240px;border:0;border-radius:1px;background-color:#121212;transition:background-color .3s linear 0s}
.search_ input:focus{outline:none;border:0;background-color:#eee;box-shadow:none}
#navigation {display:block; height: 52px; 
padding-top: 0px; 
font-family:  Arial Narrow, sans-serif; 
background:#000;
position:relative;
}
#navigation:before,#navigation:after {display: table;content: " ";} 
#navigation:after {clear: both;}
#navigation ul#big-menu {
list-style: none; 
list-style-position: outside;margin: 0;padding:0;
}
#navigation ul#big-menu:before,#navigation ul#big-menu:after {display: table;content: " ";} 
#navigation ul#big-menu:after {clear: both;}
#navigation ul#big-menu li {
position:relative;float: left;line-height: 52px;font-size: 16px; text-transform: uppercase;font-family:  Arial Narrow, sans-serif;
}
#navigation ul#big-menu li a{
display: block; padding: 0 32px 0 28px; color: #ccc;
}
#navigation ul#big-menu li.active a, #navigation ul#big-menu li:hover a{text-decoration: none; color: #eee;background:#333;}


@media only screen and ( min-width: 1025px) {
.search_{ display: block; }
#navigation a.nav-btn { display: none; }
#navigation ul#big-menu li > ul.sub-menu{
display:none;
position:absolute;
left:0;
z-index:9999;}
#navigation ul#big-menu li:hover > ul.sub-menu{
display:block;
padding:0;
margin:0;
transition-delay:0s;
background:#333;
overflow:hidden;
box-shadow:0 2px 2px rgba(0,0,0,0.3);
}
#navigation ul#big-menu li > ul.sub-menu li{
float:none;
padding:0;
margin:0;
height:40px !important;
line-height:40px !important;
background:none;
}
#navigation ul#big-menu li > ul.sub-menu li:last-child{
border-bottom:0;
}
#navigation ul#big-menu li > ul.sub-menu li a{
width:auto;
min-width:100%;
height:40px !important;
line-height:40px !important;
padding:0 20px;
white-space:nowrap;
border:none;
box-shadow:none;
background:none;
margin:0;
font-size:14px;
text-shadow:none;text-decoration:underline;
color: #ccc;
}
#navigation ul#big-menu li > ul.sub-menu li:hover a, #navigation ul#big-menu li > ul.sub-menu li.active a{
border-radius:0;
color:#eee;text-decoration: none;
height:40px !important;
line-height:40px !important;
}
#navigation ul#big-menu li a:hover + #navigation ul#big-menu li > ul.sub-menu, #navigation ul#big-menu li > ul.sub-menu:hover{display:block;}
}
@media only screen and ( min-width: 640px) and ( max-width: 1024px ) {
.search_{ display: none; }
#navigation a.nav-btn { display: block; }
#navigation { padding: 0 0 0 0; height: 36px;  z-index: 1000;position: relative; }
#navigation ul#big-menu { display: none; position: absolute; top: 36px; left: 0;  width: 100%;background: #111;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding-bottom:5px;}
#navigation ul#big-menu li { display: block; line-height: 36px !important; float: none;background:none;padding: 0;  }
#navigation ul#big-menu li a { padding: 0 20px; }
#navigation ul#big-menu li:last-child a { border-bottom:0; }
#navigation ul#big-menu li > ul.sub-menu{
display:none;
position:absolute;
left:0;
z-index:9999;}
#navigation ul#big-menu li:hover > ul.sub-menu{
display:block;
width:100%;
padding:0;
margin:0;
transition-delay:0s;
transition-delay:0s;
background:#333;
overflow:hidden;
box-shadow:0 2px 2px rgba(0,0,0,0.3);
}
#navigation ul#big-menu li > ul.sub-menu li{
float:none;
padding:0;
margin:0;
height:40px !important;
line-height:40px !important;
background:none;
}
#navigation ul#big-menu li > ul.sub-menu li:last-child{
border-bottom:0;
}
#navigation ul#big-menu li > ul.sub-menu li a{
width:auto;
min-width:100%;
height:40px !important;
line-height:40px !important;
padding:0 30px;
white-space:nowrap;
border:none;
box-shadow:none;
background:none;
margin:0;
font-size:14px;
text-shadow:none;text-decoration:underline;
color: #ccc;
}
#navigation ul#big-menu li > ul.sub-menu li:hover a, #navigation ul#big-menu li > ul.sub-menu li.active a{
border-radius:0;
text-decoration: none;
height:40px !important;
line-height:40px !important;
}
#navigation ul#big-menu li a:hover + #navigation ul#big-menu li > ul.sub-menu, #navigation ul#big-menu li > ul.sub-menu:hover{display:block;}
a.nav-btn { display: block;width:70px;margin:0 auto;position: relative;font-size: 16px; line-height: 36px;height: 28px;text-transform: uppercase; color: #ccc;font-family:  Arial Narrow, sans-serif; }
a.nav-btn:hover,a.nav-btn:focus { text-decoration: none;color:#eee }
a.nav-btn span.arr { background: url(/modules/deftpl/images/nav-arr.png) no-repeat 0 2px; width: 13px; height: 11px; position: absolute; right: 0; top: 13px; }
a.nav-btn span.arr.active { background: url(/modules/deftpl/images/nav-arr.png) no-repeat 0 -9px; }
}
@media only screen and ( max-width: 639px ) {
.search_{ display: none; }
#navigation { padding: 0 0 0 0; height: 52px;  z-index: 1000;position: relative; }
#navigation ul#big-menu { display: none; position: absolute; top: 52px; left: 0;  width: 100%;background: #000;border-bottom:1px solid #333;padding-bottom:5px;}
#navigation ul#big-menu li { display: block; line-height: 36px !important; float: none;background:none;padding: 0;  }
#navigation ul#big-menu li a { padding: 0 15px;;margin:0;color:#ccc;  }
#navigation ul#big-menu li:last-child a { border-bottom:0; }
#navigation ul#big-menu li > ul.sub-menu{
display:none;
position:absolute;
left:0;
z-index:9999;}
#navigation ul#big-menu li:hover > ul.sub-menu{
display:block;
width:100%;
padding:0;
margin:0;
transition-delay:0s;
transition-delay:0s;
background:#333;
overflow:hidden;
box-shadow:0 2px 2px rgba(0,0,0,0.3);
}
#navigation ul#big-menu li > ul.sub-menu li{
float:none;
padding:0;
margin:0;
height:40px !important;
line-height:40px !important;
background:none;
}
#navigation ul#big-menu li > ul.sub-menu li:last-child{
border-bottom:0;
}
#navigation ul#big-menu li > ul.sub-menu li a{
width:auto;
min-width:100%;
height:40px !important;
line-height:40px !important;
padding:0 30px;
white-space:nowrap;
border:none;
box-shadow:none;
background:none;
margin:0;
font-size:14px;
text-shadow:none;text-decoration:underline;
color: #ccc;
}
#navigation ul#big-menu li > ul.sub-menu li:hover a, #navigation ul#big-menu li > ul.sub-menu li.active a{
border-radius:0;
text-decoration: none;
height:40px !important;
line-height:40px !important;
}
#navigation ul#big-menu li a:hover + #navigation ul#big-menu li > ul.sub-menu, #navigation ul#big-menu li > ul.sub-menu:hover{display:block;}
a.nav-btn { display: block;width:70px;margin:0 auto;position: relative;font-size: 16px; line-height: 52px;text-transform: uppercase; color: #ccc;font-family:  Arial Narrow, sans-serif; }
a.nav-btn:hover,a.nav-btn:focus { text-decoration: none;color:#eee }
a.nav-btn span.arr { background: url(/modules/deftpl/images/nav-arr.png) no-repeat 0 2px; width: 13px; height: 11px; position: absolute; right: 0; top: 21px; }
a.nav-btn span.arr.active { background: url(/modules/deftpl/images/nav-arr.png) no-repeat 0 -8px; }
}

Стрелки nav-arr.png можно скачать по ссылке http://td1.td0.ru/modules/creative_styl … v-arr.png.

После загрузки и инициализации модуля все дальнейшие настройки меню проводите в соответствии с инструкцией к модулю.

Демо на примере дефолтного шаблона http://me5110.td0.ru , вход а админку - http://me5110.td0.ru/admin , пароль - 123.

7

Re: Сам себе веб-мастер

За последние время на сайте появились новые материалы:

Шаблон "Морской прибой" - https://sam-sebe-web-master.3shaga.ru/b … koy_priboy
Шаблон "Urban Style" - https://sam-sebe-web-master.3shaga.ru/b … rban_style
Пост в блоге "Кастомизатор шаблонов" - https://sam-sebe-web-master.3shaga.ru/b … r_shablona
Пост в блоге "Проблемы с обновлением" - https://sam-sebe-web-master.3shaga.ru/b … novleniyem