×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

    Здравствуйте уважаемый посетитель!

    Для того, чтобы можно было отслеживать текущее состояние создаваемого сайта необходимо иметь соответствующие инструменты.

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Динамический сайт → Добавляем новые страницы динамического сайта


Автор: / Дата:

Добавляем новые страницы динамического сайта

Здравствуйте уважаемый посетитель!

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

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

Содержание


  • Создаем файлы новых динамических веб-страниц
  • Создаем файлы основного содержания
  • Создаем объявления о не завершенном оформлении новых страниц
  • Исходные файлы сайта

Создаем файлы новых динамических веб-страниц


Создать файлы для новых страниц можно таким же образом, как и в предыдущей статье. Но при этом, сохраняя их в корневом каталоге "www", будем теперь указывать те имена, которые были записаны в тегах <li> меню ранее сформированной главной страницы, а именно:

  • "article.php" - страница "О маркировке стекол";
  • "action.php" - "Акция";
  • "righting.php" - Запись на маркировку";
  • "contacts.php" - "Контакты".

Как их создать более подробно рассмотрим на примере "article.php" для страницы "О маркировке стекол". Для всех остальных процедура будет аналогична.

В начале откроем "index.php" и сделаем необходимые изменения в его содержимое. Так как мы формируем динамические страницы, то эти изменения будут незначительными. Они коснутся только следующих фрагментов HTML-кода:

  • Замена заголовка;
  • Перенос атрибута тега <li> в меню шапки и футера, который необходим для отражения кнопок меню в нажатом состоянии;
  • Замена имени файла основного содержания. При этом имена этих файлов будем делать составными, включающие слово "block" и наименования соответствующих страниц, в данном случае это будет "block_article.php".

Более наглядно эти изменения показаны на приведенном ниже скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Как сделать динамические страницы, картинка 1

Рис.1

После этого, указав при сохранении "Сохранить как" соответствующее название, мы получим файл для новой страницы сайта.

То же самое проделаем и с другими файлами. Теперь содержимое папки "www" сайта должно принять следующий вид.

Для увеличения / уменьшения размера изображения кликните по картинке
Как сделать динамические страницы, картинка 2

Рис.2

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

Создаем файлы основного содержания


Для того, чтобы в дальнейшем размещать основное содержания страниц, создадим новые элементы сайта - файлы, относящиеся конкретно к каждой странице. При их создании сложностей не должно возникнуть, так как эта процедура выполнялась неоднократно. При необходимости можно вернуться к разделу "Формируем блоки динамического сайта" предыдущей статьи Создаем динамический сайт с помощью php и посмотреть как это делалось ранее.

Отличие только состоит в том, что в данном случае, при сохранении мы должны указывать те имена, которые были внесены в HTML-код файлов, созданных в предыдущем разделе.

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

  • "block_article.php" - относящийся к блоку основного содержания страницы "О маркировке стекол";
  • "block_action.php" - "Акция";
  • "block_righting.php" - Запись на маркировку";
  • "block_contacts.php" - "Контакты".

При этом разместить их нужно в папку "blocks" корневого каталога.

После выполнения этих действий содержимое папки "blocks" примет следующий вид.

Для увеличения / уменьшения размера изображения кликните по картинке
Как сделать динамические страницы, картинка 3

Рис.3

На этом этап создания элементов основного содержания закончим и перейдем к их наполнению.

Создаем информационное сообщение о не завершенном оформлении новых страниц


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

Ниже, на скриншоте такое состояние показано на примере страницы "О маркировке стекол".

Для увеличения / уменьшения размера изображения кликните по картинке
Как сделать динамические страницы, картинка 4

Рис.4

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

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

  1. <div class="tmpr-text">

  2. <p>В настоящее время сайт находится в разработке. Страница "О маркировке стекол" будет доступна по окончании ее оформления. -</p>

  3. <p>Перейти на <a href="/index.php">Главную страницу</a></p>

  4. </div>

Рис.4

Здесь, для возможности оформления текста стилями CSS для блока <div>добавлен атрибут класса "tmpr-text", где "tmpr" - сокращенное от "temporary" (временный).

Теперь, если откроем эту же страницу, то появиться добавленное сообщение.

Для увеличения / уменьшения размера изображения кликните по картинке
Как сделать динамические страницы, картинка 5

Рис.5

Ну, а теперь, для того, чтобы придать тексту более приглядный вид добавим в таблицу стилей соответствующий CSS-код, в котором текст отцентруем, сделаем дополнительные отступы, добавим абзацы, несколько увеличим и отформатируем шрифт и изменим цвет.

  1. .tmpr-text {

  2. width:80%;

  3. font-size:1.125em;

  4. text-indent:20px;

  5. margin:50px auto 50px auto;

  6. text-align:justify;

  7. }

  8. .tmpr-text p {

  9. color:#a00;

  10. line-height:1.5;

  11. }

Рис.5

Если обновить браузер, то можно увидеть, что текст приобрел более привлекательный вид.

Для увеличения / уменьшения размера изображения кликните по картинке
Как сделать динамические страницы, картинка 6

Рис.6

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

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

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

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

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

Исходные файлы сайта


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

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments