Я несколько лет поддерживаю сайты и самыми удобными в эксплуатации были старые добрые HTML страницы. Расскажу о своих приемах создания таких сайтов. В этой статье давайте рассмотрим основные принципы создания сайта. Для начинающих веб-дизайнеров будут полезны советы опытного сайтостроителя.
Большинство корпоративных порталов обходятся HTML кодом, не используют серверных скриптов и баз данных, а, тем не менее, приносят прибыль своим владельцам. Взгляните сами, у таких сайтов среди разделов присутствуют: главная страница, страница с ценами, контактами и несколько страниц каталога продукции.
Хранение контента сайта в базах данных упрощает его редактирование в некоторых случаях (сайты могут работать на движках), но грамотное построение структуры страниц сайта позволяет в дальнейшем также легко его редактировать.
Первым делом создается дизайн сайта. Я делал макеты в Фотошопе и даже в Иллюстраторе. Набросок рисовался на листе бумаге, при этом учитывалось, будет ли сайт резиновым или статичным. Вышеперечисленные программы имеют инструмент slice — «раскройка». С помощью него макет режется на отдельные прямоугольные изображения, которые потом быстро можно сохранить.
Далее начинается верстка главной страницы в HTML редакторе. Конечно же, при создании веб-страницы нужно использовать и HTML, и CSS, а также, если есть возможность и необходимость JavaScript и серверный скрипт PHP.
В этой статье не будут поясняться тонкости самой верстки. В процессе верстки всегда помните, что данная страница будет основой для всех страниц сайта, поэтому на ней должны присутствовать все классические элементы.
К ним относятся: заголовок страницы, описание страницы, ссылки на внешние css и js файлы, шапка (хедер), навигация, контент, подвал (футер). Отдельно можно выделить другие элементы, такие как место под рекламу, специальные модули. В контенте в общем случае должны быть: заголовок, «хлебные крошки» и текст.
Когда главная страница будет создана, нужно начинать заполнять сайт содержимым. Распишите на листе бумаге все разделы, которые будут на сайте. Поместите их в меню навигации. Если вы не используете php, то очень важно заранее точно определить этот список, потому что дальнейшее изменение будет осложнено количеством страниц сайта.
Если же у вас на хостинге есть поддержка php скриптов, то имеет смысл разделить код страницы на части. Те части кода, которые повторяются из страницы в страницу (шапка, подвал) нужно выделить в отдельные файлы php. Для использования php скриптов, все файлы веб-страниц должны иметь расширение php.
Для подключения страницы с частью кода используйте инструкцию
Внутри файла имя_страницы.php, оформление HTML кода может иметь разрыв. Это совсем не страшно. Данная инструкцию соберет файлы на сервере и пользователю она передастся в цельном виде.
Я, например, использовал такие файлы в одном из своих проектов:
part0script.php — файл с php скриптом
part1menu.php — файл с кодом, где располагаются меню и шапка
part2footer.php — файл с кодом, где располагается футер и счетчики
Если у вас нет поддержки php скриптов, то вы дублируете файл страницы и меняете только его контент. В дальнейшем редактирование повторяющихся частей html кода возможна с помощью замены текста в нескольких файлах в программе Дримвивер. Поэтому важно никак не изменять эти части кода.
В контенте меняется заголовок страницы, описание страницы, хлебные крошки и сам текст. Если у вас есть повторяющийся элемент, возможно, имеет смысл его также вынести в отдельный файл php. Я выносил в файл модуль со специальными предложениями. В одном разделе рекламировалась одна продукция, в другом другая.
Заполняем первый раздел. У страниц третьего уровня этого раздела будут одинаковы хлебные крошки. Поэтому не спешите делать сотни копий главной страницы.
Приведу пример. В навигации список разделов:
— запчасти для тракторов
— запчасти для комбайнов
— запчасти для самосвалов
А так выглядят хлебные крошки у всех страниц 3-его уровня первого раздела
Главная —> Запчасти для тракторов
Теперь, при добавлении нового вида продукции достаточно записать ссылку на страницу в один из разделов и создать эту страницу на основе уже существующей.
На современных сайтах используются формы обратной связи. Здесь нельзя обойтись без php. На одном моем хостинге не было поддержки php, тогда я использовал фрейм на странице, который отображал форму с другого сайта, поддерживающего php. Фреймы не используются для создания сайтов, но для подобных уловок они ой как полезны.
Расскажу еще об одном нюансе, касающемся файловой структуры сайта. Практика показала, что намного удобнее хранить файлы в одной папке. Можно в отдельную папку вынести файлы картинок, но не веб-страницы. Это упрощает систему внутренних ссылок, это не создает неудобств, при автозамене текста во всех файлах сайта.
Некоторые могут подумать, что создание HTML сайтов без баз и скриптов — это вчерашний век. В чем-то они правы. Но эти базы постоянно слетают, горы скриптов делают сайт медленным, а если хочется что-то изменить, то постоянно сталкиваешься с ограничениями системы управления сайтом.
И все-таки самыми удобными в эксплуатации были старые добрые HTML страницы.
С уважением Автор.