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

Да

Нет

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

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

895

Вся правда о заработке на блогах

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

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

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

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

    895

    Вся правда о заработке на блогах

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

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

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

    899

    Как заработать в интернете продавая информацию

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

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

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

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

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

    903

    Создать сайт за 1 час!

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

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

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

    904

    Как начать зарабатывать на партнерских программах

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

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

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

    905

    ИНФОБИЗНЕС по модели Евгения Попова

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

    В данном материале на основе своего опыта автор расскажет каким образом следует строить этот бизнес.

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

    922

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

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

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

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

    924

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

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

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

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

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

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

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

    927

    Фотошоп для начинающих (бесплатная версия)

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

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

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

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

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

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

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

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

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

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"


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

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

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

В предыдущих статьях мы занимались созданием основы сайта с возможностью вывода из базы данных 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.

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


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

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

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


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

Необходимо отметить, что данные об e-mail надежно защищены (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и не предназначены для использования третьими лицами.

Комментарии


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

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

comments powered by HyperComments

Социальные сети


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

Другие статьи из рубрики "Как сделать сайт"


Показать больше


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+