Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

922

HTML базовый курс

БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

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

Бесплатные видеокурсы!

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

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

Вы здесь: Главная → Сборник статей → Контент → Оформляем контент сайта

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

Свернуть

Все статьи рубрики "Как сделать сайт"


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

Оформляем контент сайта

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

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

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

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

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

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

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

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

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

Содержание


  • Необходимость оформления контента сайта
  • Правила оформления контента
  • Подготовка к оформлению
  • Создание файлов для основного содержания веб-страниц и размещение их в соответствии со структурой сайта
  • Дополнение шаблона для избирательного вывода основного содержания веб-страниц
  • Размещение оформляемого текста в режиме вывода контента из файла
  • Исходные файлы сайта

Необходимость оформления контента сайта


Как было выше отмечено, оформление контента является очень важным вопросом в сайтостроении, существенно влияющим на общее качество интернет-ресурса.

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

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

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

Ниже, для сравнения показаны 2 варианта главной страницы создаваемого здесь сайта:

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

Неструктуированный текст до оформления

Рис.1 Неструктуированный текст до оформления

Контент после оформления

Рис.2 Контент после оформления

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

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

Правила оформления контента


Конечно, стиль оформления контента в определенной степени субъективен. Как говориться сколько людей, столько мнений. Одним нравиться темный цвет текста на светлом фоне, другим наоборот и т.д.

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

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

Правила оформления контента
  • цвет текста ближе к черному, на светлом фоне;
  • размер основного текста в пределах от 14px до 16px;
  • для исключения нагромождения текста использование шрифта без засечек, например Arial;
  • для выделения заголовков и подзаголовков, кроме увеличения размера шрифта использование изменений его стиля, цвета и/или оригинальной окраски фона;
  • для украшения текста использование отступов между абзацами;
  • для большего восприятия текста ограничение объема абзацев не более 4÷5 строк;
  • выделение жирным шрифтом наиболее важные фрагменты;
  • выделение ссылок отличным цветом или подчеркиванием;
  • использовать списков для упорядочения текста;
  • возможное использование таблиц в случае необходимости какого-либо сравнения;
  • не использование различных шуточных фрагментов или развлекательных смайликов, так как для данной тематики сайта такое дополнение вряд ли будет уместным;
  • для наглядности и пояснения текста сопровождение его картинками и иллюстрациями соответствующей тематики;
  • использование видео.

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

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

Подготовка к оформлению


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

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

Но, в обычном режиме, когда тексты статей выводятся на веб-страницу из базы данных, требуется каждый раз после изменений в текстовом редакторе Notepad++ обновлять соответствующие записи таблицы MySQL. Что очевидно, при выполнении большого количества правок (что часто и происходит) не совсем удобно. Да и править тексты статей непосредственно в базе данных без использования Notepad++ тоже не очень складно.

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

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

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

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

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

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

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

Ну а теперь, после того, как разобрались, зачем мы это будем делать, выполним следующие преобразования:

  • Создадим файлы, в которых будем формировать основное содержание веб-страниц, разместив их в папках в соответствии со структурой сайта.
  • Добавим в файл "index.php" дополнительный PHP-код, который позволит избирательно использовать для вывода на веб-страницу основного содержания, размещенного как в базе данных, так и непосредственно в файлах сайта.

Создание файлов для основного содержания веб-страниц и размещение их в соответствии со структурой сайта


В начале создадим в корневом каталоге сайта отдельную папку под названием "articles", в которой будем располагать все файлы с основным содержанием веб-страниц.

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

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

Рис.4 Каталог с файлами основного содержания страниц

Как видно, в каталоге "articles" непосредственно размещены файлы, соответствующие главной странице с именем "main.php" и страницам с первым уровнем вложенности, такие как "kontakty.php", "poluchit-skidku.php" и "sposoby-markirovki.php". Причем имена последних совпадают с их URL.

Что касается файла для страницы с третьим уровнем вложенности с адресом "http://newsite.local/stati/ugon-avtomobilej/statistika-ugonov-2016.html", то он располагается в отдельной директории "stati/ugon-avtomobilej", как видно из рис.5.

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

Рис.5 Директория для страницы с третьим уровнем вложенности

Таким образом структура файловой системы для размещения файлов основного содержания веб-страниц полностью повторяет адресную структуру сайта. И при необходимости формирования новых веб-страниц несложно будет в дальнейшем дополнять каталог "articles" новыми файлами исходя из их URL-адресов.

Дополнение шаблона для избирательного вывода основного содержания веб-страниц


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

Ниже показан фрагмент кода в файле "index.php", с внесенными изменениями в части, касающейся получения необходимых данных для формирования динамических страниц (как обычно, строки с изменениями выделены более светлым фоном).

  1. <?php

  2. //Создание одномерного числового массива GET-параметров

  3. $get_array = array ($_GET['section'], $_GET['rubric'], $_GET['page']);

  4. //print_r($get_array);

  5. //----Получение данных для формирования динамических страниц----

  6. for ($i = 0; $i < count($get_array); $i++) {

  7. $current_url = $get_array[$i];

  8. // echo nl2br($i."-".$current_url."\n");

  9. $table = 'url';

  10. $column = 'page';

  11. $value = $current_url;

  12. $data_bd = checkLine($table, $column, $value);

  13. if ($data_bd == true) {

  14. $data_bd = getLine($table, $column, $value);

  15. $title_add = $data_bd['title'];

  16. $titlepage_add = $data_bd['title-page'];

  17. $description_add = $data_bd['description'];

  18. $content_add = $data_bd['content'];

  19. $section_rus = $data_bd['section-rus'];

  20. $rubric_rus = $data_bd['rubric-rus'];

  21. $page_rus = $data_bd['page-rus'];

  22. if (!empty($section_rus)) $section_breadcrumbs = '&nbsp;&rarr;&nbsp;<a href="'.$section.'.html">'.$section_rus.'.</a>';

  23. else

  24. $section_breadcrumbs = "";

  25. if (!empty($rubric_rus)) $rubric_breadcrumbs = '&nbsp;&rarr;&nbsp;<a href="'.$rubric.'.html">'.$rubric_rus.'.</a>';

  26. else

  27. $rubric_breadcrumbs = "";

  28. $page_breadcrumbs = '&nbsp;&rarr;&nbsp;'.$page_rus;

  29. $section = $data_bd['section'];

  30. $rubric = $data_bd['rubric'];

  31. $page = $data_bd['page'];

  32. if (empty($page)){

  33. $page_art = '/main';

  34. }

  35. else{

  36. if (!empty($section)) $section_art = "/".$section;

  37. else

  38. $section_art = "";

  39. if (!empty($rubric)) $rubric_art = "/".$rubric;

  40. else

  41. $rubric_art = "";

  42. $page_art = "/".$page;

  43. }

  44. break;

  45. }

  46. }

  47. ?>

Рис.6 Дополнение PHP-кода в файле "index.php"

Как видно, здесь в строках 29÷31 дополнительно извлекаются значения URL страниц и присваиваются вновь созданным переменным $section, $rubric и $page.

А далее, в случае непустых значений $section и $rubric к соответствующим им переменным $section_art и $rubric_art будет добавляться знак слеш "/" (поз.36,39). В противном случае - переменным $section_art и $rubric_art будет присваиваться пустое значение (поз.38,41).

Переменной же $page_art в случае пустого значения $page будет присваиваться наименование файла основного содержания главной страницы "main" со слешем (поз.33). Для остальных страниц $page_art будет принимать соответствующие значения URL с добавлением "/" (поз.33).

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

А для того, чтобы при формировании динамических страниц иметь возможность использовать файлы исходя из полученных директорий, следует в другой части шаблона главной страницы (в файле "index.php") добавить еще несколько строк PHP-кода, как показано ниже.

Для увеличения / уменьшения размера изображения кликните по картинке
Фрагмент PHP-кода вывода контента на веб-страницу

Рис.7 Фрагмент PHP-кода вывода контента на веб-страницу

Как видно, в этом случае, если переменная $content_add, соответствущая контенту, находящемуся в базе данных, имеет пустое значение (т.е. контент пока не размещен в таблице MySQL), то через языковую инструкцию include_once в качестве основного содержания будет использоваться файл по ранее полученной директории в соответствии с URL-адресом формируемой страницы.

Так, например директория инструкции include_once для главной страницы будет иметь вид articles/main.php. А для страницы "Статистика угопов" - articles/stati/ugon-avtomobilej/statistika-ugonov-2016.php. Что полностью соответствует файловой структуре каталога "articles", в котором размещены файлы основного содержания страниц.

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

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

Размещение оформляемого текста в режиме вывода контента из файла


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

  • Очистим в таблице "url" базе данных MySQL содержимое поля "content" записи, относящейся к главной страницы, как показано на скриншоте.
  • Для увеличения / уменьшения размера изображения кликните по картинке
    Пустое поле content главной страницы

    Рис.8 Пустое поле content главной страницы

  • Откроем текстовым редактором Notepad++ файл "main.php", который предусмотрен для основного содержания главной страницы и скопируем в него или составим новый текст (вариант текста главной страницы, подготовленного для создаваемого сайта, можно найти в файле "main.php" каталога "articles" в дополнительных материалах к данной статье).

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

И если теперь в Notepad++ его сохранить и открыть/обновить главную страницу сайта, то можно будет увидеть ее неструктурированный вид, аналогичный тому, как было показано ранее на рис.1.

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

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


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

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

Читать дальше


Комментарии


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

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

comments powered by HyperComments