Самые простые шаблоны сайтов

Невероятно, но факт. По статистике, если начинающий вэб-мастер начинает свой первый серьезный сайт с того, что первым делом устанавливает на свой сайт какую-нибудь очень продвинутую CMS, типа Joomla, Drupal, PHP-Nuke и т.п., то чаще всего на этом у него все создание своего серьезного проекта и заканчивается. И, наоборот, большинство самых успешных и раскрученных сайтов, как правило, начинались создаваться в блокноте с "голого" HTML без всяких CMS.

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

Моя точка зрения состоит в том, что вэб-мастеру сначала необходимо освоить HTML, CSS, PHP и т.д. и научиться делать свои сайты "руками" без всяких конструкторов, без DreamWeaver и без CMS и только потом переходить к практическому освоению CMS. Так будет больше понимания, какая CMS лучше подойдет для какой-нибудь конкретной цели, в чем их действительные и мнимые преимущества и недостатки, и даже где их можно подправить для своих целей.

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

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

Дизайны, которые рассматриваются здесь, это не дизайны для украшательства своего сайта. Если Вы хотите сделать просто красивый сайт, то покиньте эту страничку. Здесь для Вас ничего интересного нет. Здесь шаблоны сайтов рассматриваются и оцениваются не с точки зрения возможности сделать что-то красивое, такое, что все зайдут на Ваш и ахнут от удивления. Украшательские шаблоны здесь не рассматриваются вообще. Считается, что Вы делаете полезный сайт сам по себе, по его внутреннему содержанию. То есть на Ваш сайт будут приходить люди не потому что там, что-то удивительно красивое, а потому что у него полезное содержимое, которое постоянно пополняется и меняется. Поэтому дизайнерские шаблоны для начинающих тут рассматриваются, во-первых, с точки зрения раскрутки сайта в поисковиках, а, во-вторых, с точки зрения удобства наполнения сайта новым материалом и модификацией старого материала. Разумеется, что речь идет о наполнении сайта новым материалом и его модификацией исключительно самим вэб-мастером, который знает HTML. Другими словами, эти шаблоны не являются чем-то типа распространенных CMS, которые предназначенны для наполнения контентом и для его изменения людьми не знакомыми с HTML.

Рассмотрим четыре шаблона:

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

Но сначала несколько слов о вэб-дизайне.

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

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

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

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

Сайт на таблицах

Пример сайта с дизайном на таблице можно посмотреть на сайте table.free.nanoquant.ru. На этом сайте Вы найдете описание преимуществ и недостатков такого дизайна, поэтому здесь повторятся не будем. Разнообразие внешнего вида страниц создается разными границами блоков, отступом контента от границ, раскраской блоков, их шириной и высотой, фоновыми рисунками и т.д. На том же сайте вы найдете страницу с мини-справочником по тэгам и аттрибутам таблиц в HTML.

Для упрощения понимания, технология CSS мною намеренно не используется.

Там же в левой колонке Вы можете скачать пустые страницы-шаблоны для хостинга без поддержки PHP и для хостинга с поддержкой PHP. Обращаю Ваше внимание, что для случая хостинга с поддержкой PHP в файле .htaccess применяется технология подмены расширения файлов. На самом деле все файлы такого сайта имеют расширение php для того, чтобы в них без проблем выполнялись любые PHP-скрипты, но для посетителей сайта и для поисковых систем все страницы будут иметь расширение html, как будто бы это простые статические страницы. Поэтому, если Вы хотите сделать ссылку на какую-нибудь страницу Вашего сайта, то в ссылке надо указать страницу с расширением html, хотя открываться будет страница с тем же самым именем, но с расширением php. Значит, для корректной работы сайта, нельзя, чтобы на сайте были две страницы с одинаковым именем, но с двумя разными расширениями php и html. Делайте на таком сайте для однообразия все файлы с расширением php.

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

Сайт на фреймах

Чтобы посмотреть пример сайта с дизайном на фреймах перейдите на сайт frame.free.nanoquant.ru. Этот сайт также бес проблем может работать и на бесплатных хостингах. Тут Вы найдете описание преимуществ и недостатков такого дизайна, поэтому здесь также повторятся не будем. Разнообразие внешнего вида страниц также создается разными границами блоков, отступом контента от границ, раскраской блоков, их шириной и высотой, фоновыми рисунками и т.д. Чтобы не затуманивать сути, в учебном примере также не используется технология CSS. На том же сайте Вы найдете и страничку с мини-справочником по фреймам.

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

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

Общие рекомендации по применению фреймов следующие.

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

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

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

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

В этом же случае, в таких файлах лучше делать обычную структуру html-файлов с традиционными разделами head и body. В учебном примере на сайте frame.free.nanoquant.ru я не стал создавать такую структуру у файлов с основным контентом (которые сливаются в центральную колонку) чисто для простоты, чтобы все было как можно проще и при этом работало. А надо бы сделать, конечно же, все по правилам написания html-файлов для файлов с основным контентом, которые могут оказаться в выдаче поисковой системы.

Сайт на плавающих фреймах

Плавающие фреймы решают большинство проблем имеющиеся у простых фреймов, но овладеть ими порой не так-то просто. Снова читаем материал следующего сайта, расположенного по адресу: iframe.free.nanoquant.ru. Там также дается информация по преимуществам и недостаткам плавающих фреймов, есть мини-справочник по плавающим фреймам. Все примеры не содержат технологии CSS, чисто для упрощения демонстрации.

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

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

Сайт на Святом Граале

Это конечно шедевр дизайнерского искусства. Смотрим материал сайта holygrail.free.nanoquant.ru и наслаждаемся. Этот дизайн уже существенно опирается на использование технологии CSS, поэтому там дается небольшой мини-справочник, но только в пределах, необходимых для понимания Святого Грааля.

Там же можно скачать пустые страницы-шаблоны для хостинга без поддержки PHP и для хостинга с поддержкой PHP. Как и в случае табличного дизайна, для хостинга с поддержкой PHP приведен файл .htaccess для подмены расширений файлов с php на html. Поэтому все ссылки должны идти на файлы с расширением html, а реально эти файлы должны иметь расширение php, чтобы там могли выполняться любые PHP-скрипты, а поисковики принимали эти файлы за обычные статические html-файлы. Для корректной работы подмены расширений, не создавайте два файла с одним и тем же именем, но с двумя разными расширениями php и html, и будет Вам PHP-счастье! :)

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

Святой Грааль - это оптимальный дизайн для поисковых систем. Поисковику до лампочки, как прикольно и красиво внешне выглядит Ваш сайт. Поисковик изучает внутренности страниц Вашего сайта. Если Вы уже врубились в эту тему, то Вы сразу же поймете, почему профессионалы не любят некоторые движки для сайта, например, PHP-Nuke. Если посмотреть на код страниц, которые создает PHP-Nuke, то можно увидеть, что он основан на табличном дизайне. (Более правильно надо сказать, что профессионалы применяют CMS типа PHPNuke только тогда, когда уверены, что раскрутка сайта пойдет не через SEO, не через поисковики. А такое, кстати, тоже встречается.)

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

В заключение замечу, что тот шаблон, который Вы скачали (я надеюсь) с сайта holygrail.free.nanoquant.ru представляет собой простейшую реально рабочую реализацию Святого Грааля. Существуют и более сожные реализации. Все они также основаны на идее "листа Мебиуса". Но простота помогает понять основную идею не отвлекаясь на многочисленные мелочи и детали, которые могут загромоздить суть.


[0] Простые шаблоны сайтов
[1] Классификация CMS


Классификация заработка в Интернете

Кошелек WebMoney

Свой домен

Хостинг

Сайтострой

Раскрутка сайта

Раскрутка в соц.сетях

Авторские права

Прямые ссылки

Налоги

Самые простые
заработки на своем сайте

Интернет-магазин


Приложения

Список Аддурилок

Опасный Яндекс

HTML-редактор
с учебниками

FTP-клиент
FileZilla Client

Генератор карты сайта

Простые шаблоны

  1. Классификация CMS


Бесплатные хостинги
Список халявных хостингов

Как создать свой сайт


Если нет своего сайта

Список укротителей ссылок

Как распознать лохотрон

Заработок в Интернете
для тех у кого нет сайта

Инвестиции в Интернете
без сайта


Разное

Словарь

Юмор

Блог?... Скорее КинжЛог!










Наши Сервисы:

Генератор сайтов

Скачать халяву

Скидочные купоны

Визуальный онлайновый конвертор

Мастер Рефералов

Генератор паролей

Генератор цветовых схем

Проверка качества сайта

Бесплатные скрипты