Размер шрифта
Цвет фона и шрифта
Изображения
Озвучивание текста
Обычная версия сайта
услуги маркетолога
проекты на 1С Битрикс
+7 812 922-48-74
+7 812 922-48-74для Петербурга
+7 966 869-64-91 для регионов
Заказать звонок
E-mail
info@livemarketolog.ru
Адрес
г. Санкт-Петербург, ул. Салова 50
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Подать заявку
Частный маркетолог
  • О маркетологе
  • История
  • Лицензии
  • Партнеры
  • Производители
  • Отзывы
Услуги
  • E-mail маркетинг
    • Корпоративная почта на google.com
    • Корпоративная почта на mail.ru
    • Корпоративная почта на Яндекс
  • Ведение соц.сетей
    • Ведение вконтакте
    • Ведение facebook
    • Ведение instagram
  • Интеграция с 1С
    • Аудит состояния каталога, учетной системы и сайта заказчика
    • Интеграция с 1С: Предприятие: Каталог товаров
    • Интеграция с 1С: Предприятие: Заказы
    • Нетиповая интеграция с 1С
  • Информационная безопасность
    • Анализ и поиск точек вторжения
    • Аудит безопасности сайта
    • Консультация по информационной безопасности
    • Устранение последствий взлома
  • Кейсы (выполненные проекты)
    • Брендирование брелков AIRTAG
    • Грибы не отпускают
    • Организация встречи Rémy Martin с прессой
    • Организация мастер-класса по выпечке
    • Суровое бритье по-Челябински
    • Техническое обеспечение SEE 2016
    • Техническое обеспечение Владимирского форума 2016
    • Техническое обеспечение Владимирского форума 2017
    • Техническое обеспечение Федерального Арктического Форума
  • Консультация маркетолога
    • Консультация маркетолога
  • Миграции продуктов
    • Миграция на Аспро: Лайтшоп с Аспро.Maximum
    • Миграция на Аспро: Лайтшоп с Аспро.Next
  • Наполнение сайтов
    • SEO-оптимизация
    • SMM-оптимизация
    • Наполнение интернет-магазинов
    • Наполнение корпоративных сайтов
  • Поддержка сайтов
    • Техническая поддержка сайтов
  • Полиграфические материалы
    • Буклеты
  • Продвижение сайтов
    • SERM оптимизация
    • Реклама в GOOGLE.ADWORDS
    • Реклама в социальных сетях
    • Реклама в Яндекс.Директ
  • Создание сайтов
    • Создание интернет-магазинов
    • Создание корпоративных сайтов
    • Создание промо-страниц
  • Товарный маркетинг
    • Подключение интернет-магазина к Яндекс.Маркет
Портфолио
  • Создание интернет-магазинов
  • Создание корпоративных сайтов
Новости
Статьи
Контакты
  • Отзывы
  • Вопрос-ответ
  • Контакты
  • ...
    ...
    +7 812 922-48-74
    +7 812 922-48-74для Петербурга
    +7 966 869-64-91 для регионов
    Заказать звонок
    E-mail
    info@livemarketolog.ru
    Адрес
    г. Санкт-Петербург, ул. Салова 50
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    Войти
    услуги маркетолога
    проекты на 1С Битрикс
    Частный маркетолог
    • О маркетологе
    • История
    • Лицензии
    • Партнеры
    • Производители
    • Отзывы
    Услуги
    • E-mail маркетинг
      E-mail маркетинг
    • Ведение соц.сетей
      Ведение соц.сетей
    • Интеграция с 1С
      Интеграция с 1С
    • Информационная безопасность
      Информационная безопасность
    • Кейсы (выполненные проекты)
      Кейсы (выполненные проекты)
    • Консультация маркетолога
      Консультация маркетолога
    • Миграции продуктов
      Миграции продуктов
    • Наполнение сайтов
      Наполнение сайтов
    • Поддержка сайтов
      Поддержка сайтов
    • Полиграфические материалы
      Полиграфические материалы
    • Продвижение сайтов
      Продвижение сайтов
    • Создание сайтов
      Создание сайтов
    • Товарный маркетинг
      Товарный маркетинг
    Портфолио
    • Создание интернет-магазинов
    • Создание корпоративных сайтов
    Новости
    Статьи
    Контакты
      Подать заявку
      +7 812 922-48-74
      +7 812 922-48-74для Петербурга
      +7 966 869-64-91 для регионов
      Заказать звонок
      E-mail
      info@livemarketolog.ru
      Адрес
      г. Санкт-Петербург, ул. Салова 50
      Режим работы
      Пн. – Пт.: с 9:00 до 18:00
      Заказать звонок
      Поиск
      Войти
      Подать заявку
      Телефоны
      +7 812 922-48-74 для Петербурга
      +7 966 869-64-91 для регионов
      Заказать звонок
      • Частный маркетолог
        • Частный маркетолог
        • О маркетологе
        • История
        • Лицензии
        • Партнеры
        • Производители
        • Отзывы
      • Услуги
        • Услуги
        • E-mail маркетинг
          • E-mail маркетинг
          • Корпоративная почта на google.com
          • Корпоративная почта на mail.ru
          • Корпоративная почта на Яндекс
        • Ведение соц.сетей
          • Ведение соц.сетей
          • Ведение вконтакте
          • Ведение facebook
          • Ведение instagram
        • Интеграция с 1С
          • Интеграция с 1С
          • Аудит состояния каталога, учетной системы и сайта заказчика
          • Интеграция с 1С: Предприятие: Каталог товаров
          • Интеграция с 1С: Предприятие: Заказы
          • Нетиповая интеграция с 1С
        • Информационная безопасность
          • Информационная безопасность
          • Анализ и поиск точек вторжения
          • Аудит безопасности сайта
          • Консультация по информационной безопасности
          • Устранение последствий взлома
        • Кейсы (выполненные проекты)
          • Кейсы (выполненные проекты)
          • Брендирование брелков AIRTAG
          • Грибы не отпускают
          • Организация встречи Rémy Martin с прессой
          • Организация мастер-класса по выпечке
          • Суровое бритье по-Челябински
          • Техническое обеспечение SEE 2016
          • Техническое обеспечение Владимирского форума 2016
          • Техническое обеспечение Владимирского форума 2017
          • Техническое обеспечение Федерального Арктического Форума
        • Консультация маркетолога
          • Консультация маркетолога
          • Консультация маркетолога
        • Миграции продуктов
          • Миграции продуктов
          • Миграция на Аспро: Лайтшоп с Аспро.Maximum
          • Миграция на Аспро: Лайтшоп с Аспро.Next
        • Наполнение сайтов
          • Наполнение сайтов
          • SEO-оптимизация
          • SMM-оптимизация
          • Наполнение интернет-магазинов
          • Наполнение корпоративных сайтов
        • Поддержка сайтов
          • Поддержка сайтов
          • Техническая поддержка сайтов
        • Полиграфические материалы
          • Полиграфические материалы
          • Буклеты
        • Продвижение сайтов
          • Продвижение сайтов
          • SERM оптимизация
          • Реклама в GOOGLE.ADWORDS
          • Реклама в социальных сетях
          • Реклама в Яндекс.Директ
        • Создание сайтов
          • Создание сайтов
          • Создание интернет-магазинов
          • Создание корпоративных сайтов
          • Создание промо-страниц
        • Товарный маркетинг
          • Товарный маркетинг
          • Подключение интернет-магазина к Яндекс.Маркет
      • Портфолио
        • Портфолио
        • Создание интернет-магазинов
        • Создание корпоративных сайтов
      • Новости
      • Статьи
      • Контакты
      Подать заявку
      • Кабинет
      • +7 812 922-48-74 для Петербурга
        • Телефоны
        • +7 812 922-48-74 для Петербурга
        • +7 966 869-64-91 для регионов
        • Заказать звонок
      • г. Санкт-Петербург, ул. Салова 50
      • info@livemarketolog.ru
      • Пн. – Пт.: с 9:00 до 18:00
      Главная
      —
      Статьи
      —
      Архив
      —Веб-сайт: сборка по кирпичикам

      Веб-сайт: сборка по кирпичикам

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

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

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

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

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

      Если за создание каждого информационного блока отвечает PHP-скрипт, "встроенный" в HTML-код страницы, то ничего, кроме головной боли, обслуживание такого сайта вам не принесет. Любое изменение структуры сайта или способа обработки информации в одном из блоков приведет к необходимости вносить значительные коррективы сразу во множество страниц. Поэтому веб-программисты стремятся как можно сильнее отделить код сайта от его верстки и дизайна.

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

      Вариант 1. Вложения

      Задача - собрать сайт из статичных блоков.
      Для того, чтобы собрать веб-страницу по кирпичику, надо ее сначала разбить на кирпичики. Рассмотрим в качестве примера страницу http://devser.com/code/download.php, с которой, кстати, можно скачать несколько заготовок для темплейтных сайтов. Верхний блок назовем Header, нижний, соответственно, - Footer, меню - Menu, а основной информационный текст - Main. Это и будут кирпичики для нашего сайта. 
      Код, соответствующий каждому блоку, поместим в отдельный файл с расширением .txt (чтобы не путать с полноценными HTML-страницами). Редактировать эти текстовые файлы можно в любом HTML-редакторе. А сборка страницы выполняется с использованием PHP.

      <?php
      include ("header.txt");
      include ("menu.txt");
      include ("main.txt");
      include ("footer.txt");
      ?>
      

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

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

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

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

      Вариант 2. Динамическая структура

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

      Вид основной странички (index.php) изменился незначительно:

      <?php        
      require("func.php");   
      include("header.txt"); 
      text();               
      include("footer.txt"); 
      ?>
      

      Дело в том, что все самое интересное спрятано в файле func.php (см. листинг), который подключается в первой же строчке скрипта. Файл func.php состоит из двух частей. В первой определяются значения переменных, которые понадобятся в дальнейшем, а во второй содержится описание функции text, выполняющей вставку изменяемого текста. В данном простейшем примере нам понадобилась единственная переменная $text_path, задающая путь к каталогу, из которого функция text будет брать файлы.

      Может возникнуть естественный вопрос: а как же функция text определит, какой файл следует вставить? Ведь мы создаем многостраничный сайт. Для доступа ко всем страницам используется файл index.php, а для указания, какой информацией наполнить страницу, служит параметр page, передаваемый в формате CGI-запроса, например, index.php?page=news - для ссылки на страницу с новостями или index.php?page=photo - для странички с фотоальбомом и т. д. Если имя раздела не было задано, или указанной страницы не существует, выводится текст из файла index.txt.

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

      Вариант 3. Единый темплейт для всего сайта

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

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

      <? require("func.php"); ?>
      <HTML><HEAD>
      <TITLE>Template Site</TITLE>
      </HEAD><BODY>
      <!-- здесь может быть любой HTML-код, задающий верстку и дизайн сайта --> <? menu(); ?> <!-- HTML-код продолжается --> <? text(); ?> <!-- HTML-код продолжается --> <? news(); ?> <!-- HTML-код продолжается --> </HTML></BODY>

      Поместим код темплейта в файл index.php. Он полностью описывает структуру нашей страницы, если не считать того, что вместо основного текста в нем содержится вызов функции text, вместо меню - вызов функции menu, а вместо блока кратких новостей - вызов функции news. Код этих функций размещен в файле func.php, который подключается директивой require в начале темплейта.

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

      Другой пример динамического блока - функция news. Обычно она просто помещает в отведенное ей место темплейта сводку кратких новостей сайта из файлаshortnews.txt. Однако это не имеет смысла, если мы находимся на основной странице новостей. В этом случае вызывается функция banner, которая вместо новостей вставляет рекламный баннер.

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

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

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

      Листинг. Файл func.php
      <?php
      $text_path = "text/";               // Каталог с текстами
      
      // Вставка блока основного текста соответственно параметру $page
      function text() 
      {
       if($page == "news"){ include($text_path."news.txt"); }
        elseif($page == "photo"){ include($text_path."photo.txt"); }
        // ...
         else{ include($text_path."index.txt"); }
      }                       
      
      // Вывод навигационного меню без ссылки на страницу $page
      function menu() 
      {
       if($page != ""){ echo ("<a href='index.php'>Главная</a><br>"); }
        elseif($page != "news"){ echo ("<a href='index.php?page=news'>Новости</a>"); }
         elseif($page != "photo"){ echo ("<a href='index.php?page=photo'>Галерея</a>"); }
        // ...
      }                       
      
      // Вывод блока кратких новостей (если мы не на основной новостной странице)
      function news() 
      {
       if($page != "news"){ include ($text_path."shortnews.txt"); }
        else{ banner(); }
      }                  
      ?>
      
      Киса, вы умеете рисовать?

      Пожалуй, самый незаменимый человек в команде веб-студии - это веб-дизайнер. Вы или умеете рисовать, или нет. Как же быть, если сайт надо делать в одиночку, а по рисованию с черчением в школе у вас была натянутая тройка? В таком случае, скорее всего, вам подойдут бесплатные HTML-темплейты, которых в Сети довольно много. В качестве примера могу привести парочку ссылок. Например, со страницыhttp://winstart.com/template все можно скачать бесплатно, а перед скачиванием еще и посмотреть, как это будет выглядеть при использовании. На www.elcdesigns.comбольшая часть темплейтов платная, но впечатляет уровень сервиса.

      На www.icehousedesigns.com/downloads все выглядит достаточно просто, но при желании можно найти довольно любопытную информацию о создании сайтов и различные графические заготовки. На других сайтах все приблизительно так же - где-то получше, где-то похуже.

      Где взять темплейты?
      • www.freelayouts.com/templates/templates.php - более 800 темплейтов не только HTML, но и Flash, Swish, много описаний и, конечно, возможность добавить свой темплейт и участвовать в конкурсах на лучший темплейт.
      • www.templateclub.com - требует регистрации.
      • www.snakeyewebtemplates.com/web-templates/templates-free.html - есть и бесплатный, и платный разделы.
      • www.oswd.org - немного мрачноватый сайт, однако темплейты можно просматривать не в виде картинок, а в уже законченном HTML-виде.
      • winstart.com/template - бесплатно, перед скачиванием можно посмотреть превью.
      Где взять скрипты?
      • www.scriptsearch.com - один из крупнейших сайтов.
      • www.script-index.com - около 500 скриптов.
      • www.php-resource.de - более 2000 скриптов.
      • www.hotscripts.com - более 40 000 скриптов.
      Первая публикация в журнале "Мир Интернет" №8 2002 год.
      Дополнительно

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

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

      • Комментарии
      Загрузка комментариев...
      Назад к списку
      • 1С Битрикс 10
      • Архив 3
      • Бизнес-советы 2
      • Зачем и почему 3
      • Интервью 4
      • Интернет-магазины 4
      • Интернет-сервисы 5
      • Как сделать 3
      • Маркетологу 19
      AEO API bitrix jivo php SEO webmaster бэкап домен иконка информация консультант контент контент-маркетинг логотип магазин майнер маркетинг маркетолог настройки нейминг новости онлайн консультант оптимизация покупка почта продажи регистрация домена регистрация хостинга редактор сайт сервисы стоимость стратегия технологии траффик фирменный стиль хостинг чат яндекс.диск яндекс.маркет
      +7 812 922-48-74
      +7 812 922-48-74для Петербурга
      +7 966 869-64-91 для регионов
      Заказать звонок
      E-mail
      info@livemarketolog.ru
      Адрес
      г. Санкт-Петербург, ул. Салова 50
      Режим работы
      Пн. – Пт.: с 9:00 до 18:00
      Заказать звонок
      info@livemarketolog.ru
      г. Санкт-Петербург, ул. Салова 50
      Услуги
      E-mail маркетинг
      Ведение соц.сетей
      Интеграция с 1С
      Информационная безопасность
      Кейсы (выполненные проекты)
      Консультация маркетолога
      Миграции продуктов
      Наполнение сайтов
      Поддержка сайтов
      Полиграфические материалы
      Продвижение сайтов
      Создание сайтов
      Товарный маркетинг
      Каталог
      Готовые сайты
      Лицензии 1С Битрикс
      Компания
      О маркетологе
      История
      Лицензии
      Партнеры
      Производители
      Отзывы
      Информация
      Вопрос-ответ
      Новости
      © 2023 Частный интернет-маркетолог Алексей Гончаренко
      Политика конфиденциальности
      Подписаться на рассылку
      Главная Кабинет Поиск Каталог Акции Контакты Услуги Бренды Новости Сотрудники Отзывы Партнеры Карьера FAQ Компания Проекты Лицензии Документы Реквизиты Блог Обзоры Тарифы Галерея Цены