⬜Делаем современный сайт для твоего проекта⬜

Руководство ⬜Делаем современный сайт для твоего проекта⬜

Обзор Обновления (2) Рецензии (3) Обсуждение
Поддерживаемые версии
  1. 1.16
Привет. Может ты меня знаешь по теме - тема, но это вряд-ли. Я решил создавать сайты ибо мне это больше по душе. А если ты тоже хочешь делать сайты и получать доход с них? Хорошо, сейчас научу.
Сегодня мы будем верстать данный дизайн:
Y0RZpcwAHBFx5aUfIZSuUo2XB6vtsrg-SrJOW01RjuMcSK23SN94Cpe_00_sRJnvj9nwIcimoiuwwnS931zCX6tg (1).jpg

Правда сделаем мы не все, а лишь часть. Так-как я хочу узнать интересна ли вам, данная тема.

Тема будет обновляться, если вы чего-то не увидели, напишите в обсуждении.

Для начала надо подготовиться, согласен? Советую использовать Sublime Text 3 либо Notepad3++, но лучше Sublime. Скачать вы можете, нажав на слово - скачать.

Так-же устанавливаем OpenServer panel. Эта программа сделает из нашего компьютера локальный сервер, то есть мы сможем зайти на сайт, только со своей сети. Сразу предупреждаю, что загрузка будет долгой (не советую скачивать OSpanel с посторонних сайтов). Что бы скачать OSpanel нажмите на слово - скачать.

После всего этого, мы запускаем OSpanel и видим флажок на панели задач Windows. Нажимаем на флажок, далее в самом низу - настройки. У тебя появилась меню, нажми на вкладку модули и если ты хочешь ставь настройки как у меня (рекомендую).
Снимок.PNG


Далее нажимай сохранить. Все, OSpanel мы настроили. Теперь начнем создание сайта. Нажимаем на флажок, далее папка с проектами, в этой папке, ты должен создать название сайта. Пример: yourname.ru .
Далее скачиваем адаптивный движок dle13_2. Заходим в архив и все файлы из папки upload перекидываем в наш проект. Запускаем OSpanel. Скачать движок тут - скачать.

Так как это инструкция для чайников, скажу что такое адаптивный сайт. Допустим ты хочешь зайти на сайт с телефона и данный движок адаптирует сайт под него, надеюсь объяснил. Заходим в Sublime Text 3 и скачиваем такие плагины как: Emmet и AutoFileName. Emmet помогает быстро вводить данные, увидеть их можете тут - emmet. AutoFileName - поможет нам быстро ввести путь, до той или иной папки.

Создадим базу данных. Нажимаем на флажок и вкладка "Дополнительно". В этой вкладке выбираем PhpMyAdmin. В поле логина пишем root, а поле пароля оставляем пустым. Выбираем тему pmahomme. Нажимаем на "Создать БД". В поле выше выбираем "Учетные записи пользователей". Нажимаем на "Создать нового пользователя". Вводим так-же как на картинке, только свое название сервера и свой уникальный пароль, я поставил 123123. Так-же выдаем нашему пользователю все привилегии.
Снимок.PNG

После создания уч. записи, наконец создаем базу данных. Нажимаем на "Создать БД". Выбираем кодировку utf8_general_ci, а в названии базы данных вводим название нашего проекта, что вполне логично. Нажимаем "Создать". Теперь в поисковой строке вводим наш домен, у меня это yourserver.ru Все зависит от того как вы назвали свою папку. Нажимаем "Начать установку", далее соглашаемся на все правила и внимательно смотрим что бы все было разрешено.

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


После ввода данных нажимаем продолжить и заходим в папку с нашими файлами, там мы удаляем файл install.php. Заходим в наш админ-аккаунт. Это тот аккаунт который мы регистрировали на скриншоте выше. Заходим в наш проект, там заходим в папку "templates" и создаем наш стиль, у меня это будет "yoursite" (да я наконец понял что делаю тутор по сайту, а не по серверу). Дальше обратно заходим на наш сайт и там заходим в админпанель.
Снимок.PNG


Выбираем пункт "Настройка системы", листаем вниз и выбираем вместо стиля Default наш стиль. Сохраняем и обновляем сайт. oops.. ошибка. Ее легко исправить, если прочитать что нам пишет сайт. Мы просто не создали файл main.tpl в папке с нашем стилем, ну что-ж создаем. Ошибка пропала, отлично.

Приступаем к написанию самого сайта. Мы будем использовать библиотеку Bootstrap. Заходим на эту ссылку - bootstrap. Данный сайт поможет вам в разработке. Нажимаем на документацию и копируем д данный код (на BS его нет, так что копируйте у меня)
HTML: 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Демо Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <h1>Привет мир!</h1>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

Данный код мы вставляем в файл main.tpl . Не забудьте в Sublime Text 3 переключить код с Plain Text на HTML. Cохраняем файл main.tpl и заходим на сайт после чего обновляем его. Видим надпись, нам такое не нужно, значит заходим в main.tpl и удаляем title и <h1>Привет мир!</h1>. Сохраняем. Дабы наш сайт был лучше мы должны добавить обязательные теги. А именно: {headers} и {AJAX}. Их значения в спойлерах ниже.
Выводит всю основную информацию, без которой сайт не может работать: заголовок страницы, описание страницы, ключевые слова и различные мета-теги.

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

Обычно, располагают сразу после открывающего тега <body>. Но можно подключить и после закрывающего </body>, чтоб немного сократить время загрузки страниц.
Подробнее тут - ccылка.

Как мы видим, на сайте есть навигационная панель, давайте реализуем её. Заходим на BootStrap и пишем "Навигационная панель". ссылка для ленивых. Копируем данный код и вставляем его в наш файл main.tpl. Сохраняем и обновляем. Что мы сделали? Мы создали класс
HTML: 
<nav class="navbar navbar-expand-lg bg-light">
, очень много классов. В будущем эти классы мы сможем изменять, с помощью CSS. Вот такой код у нас получился за сегодня
HTML: 
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    {headers}
    {AJAX}


<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Навбар</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ссылка</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Выпадающий список
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Действие</a></li>
            <li><a class="dropdown-item" href="#">Другое действие</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Отключенная</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск">
        <button class="btn btn-outline-success" type="submit">Поиск</button>
      </form>
    </div>
  </div>
</nav>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>
Вот что у нас получилось:
Снимок.PNG


Но на исходнике у нас данная навигационная панель находится в не ком "контейнере".
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа.
Так давайте же создадим его. Удаляем весь навбар кроме самого класса
<nav class="navbar navbar-expand-lg bg-light"> </nav>
После чего в данном классе пишем .container и нажимаем TAB на нашей клавиатуре. Плагин emmet в данный момент помог нам создать контейнер. <все повторяющиеся классы\слова, либо не нужны div'ы мы удаляем, либо копируем код у меня.> После чего наш код должен выглядеть так:
HTML: 
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    {headers}
    {AJAX}


<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Навбар</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ссылка</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Выпадающий список
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Действие</a></li>
            <li><a class="dropdown-item" href="#">Другое действие</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Отключенная</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск">
        <button class="btn btn-outline-success" type="submit">Поиск</button>
      </form>
    </div>
  </div>
  </div>
</nav>
   
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

После написания кода обновляем сайт, и все встает в колонку, отлично. Но она слишком большая, мы нажимаем по странице сайта ПКМ и у нас открывается меню где мы нажимаем на "Просмотр кода".
Все, теперь заходим в наш стиль, а точнее папку templates, и создаем там папку "assets", в папке assets,
Мы создаем папку "styles", а уже в этой папке файл "styles.css", это наши стили, в которых мы сможем редактировать классы, допустим кнопок. Готово.

Давайте уберем лишнее в нашей панели, заходим в main.tpl и там изменяем: Навбар на Yourserver, Ссылка на сервера, Выпадающий список на Информация, возле слова "Отключенная" удаляем disabled, а само слово изменяем на Донат, а input "Поиск" (не кнопка), мы удаляем. Такой код у нас получается:
HTML: 
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    {headers}
    {AJAX}


<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Yourserver</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Сервера</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Информация
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Действие</a></li>
            <li><a class="dropdown-item" href="#">Другое действие</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link">Донат</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <button class="btn btn-outline-success" type="submit">Поиск</button>
    </div>
  </div>
  </div>
</nav>
   
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

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

Пока!
  • Мне нравится (+1)
  • Печально (-1)
Реакции: Yatochka8, TheFallenDaemon, maz1lovo и ещё 1 человек
Автор
sskail
Просмотры
2 017
Первый выпуск
Обновление
Оценка
1.33 звёзд 3 оценок
Обсудить ресурс

Другие ресурсы пользователя sskail

Поделиться ресурсом

Последние обновления

  1. Продолжение!

    - Объяснил что такой "Контейнер" и как его создать. - Создали контейнер, изменили навбар.

  2. Исправления в тексте.

    > Исправил несколько грамматических ошибок.
Читать дальше…

Последние рецензии

M
Чем-то напомнило https://youtu.be/6cYJZW2iyvg?t=5059
Да и зачем ради одной страницы ставить движок? Он будет есть ресурсы сервера, дольше будет загружаться сайт, к тому же ещё и потенциальные баги и уязвимости. Может лучше всё одним html файлом сделать?
Позитивный голос 0 Негативный голос
mani123
Используйте лучше https://namelessmc.com/ с плагинами и темами
Позитивный голос 0 Негативный голос
У
  • Удалённый пользователь
  • 1.00 звёзд
> Далее скачиваем адаптивный движок dle13_2_nulled

ты бы хоть сам читал что пишешь. инструкция по юзанию крякнутого ПО, норм придумал, мастер гайдов. да и не жирно ли будет DLE ставить для сайта с тремя страницами?

кароче гайд ни о чем, тоже самое можно сделать и без движка, зачем он здесь нужен неясно.
sskail
sskail
Ммм, а вы читали что пишете?

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