Пошаговая история создания сайта

Пошаговая история создания нашего сайта

Думаю, будет интересно узнать о создании сайта на конкретном примере. Итак, с чего начать?

1. Название.

Должно быть легко запоминающимся. И при этом не навязшим в зубах. Мы остановились на "Маленьких волшебниках". Не сказать, что очень оригинально, но запоминается. И доменное имя. Тоже немаловажно. Нужно, чтобы вразумительно звучало на русском и не шибко ужасно на английском. Когда выбирали имя, все крутилось вокруг школы и детей. Я ввел baby-scool и оно оказалось свободно. Зря не проверил без дефиса - там оказалось зеркало сайта одного московского детского сада.  Так что рекомендую внимательно его выбирать. И так - название и доменное имя были. 

2. Хостинг был выбран на яндексе как на одной из самых устойчивых систем в РУ. Он позволяет иметь свой оригинальный дизайн. А этого и хотелось. Угловатые однотипные сайты с малофункциональных движков уже вызывают тошноту. Можно, конечно, зарегистрировать бесплатное доменное имя в spb.ru, но тогда нужно искать, где размещать сам сайт. И уже покупать хостинг. Выглядит солидно, но затраты около 1000 в год.

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

 Милый логотипчик, правда?

И остальные графические элементы тоже нужно создавать или подбирать. По-быстрому была сляпана вот такая "Шапка":

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

4. HTML редактор. В чем это собрать уже в страницу. Редакторов много, у меня был некоторый опыт общения с Dreamweaver 2004, с него и начали. Старичок хоть не сильно хорошо все умел, но был знаком и был русский (русифицированый). Сейчас мы уже работаем в Adobe Dreamweaver CS4. Да, если над сайтом работают несколько человек, то очень желательно, чтобы редакторы у них были одинаковые. Тогда не возникает проблем со служебными файлами. А так спрашивайте, смотрите, выбирайте. То, в чем мы колотим, тоже не идеал. 

5. Шаблон страницы Теперь садимся и рисуем в редакторе ту страницу, которая будет сопровождать весь сайт. Или почти весь. Это уже по желанию. Процесс долгий, с многократными переделываниями и скандальчиками. В результате получилось у нас что-то вот такое:

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

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

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

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

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

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

Тренироваться "на кошках" мы решили создавая библиотеку требуемой для занятий литературы. Литературы нужно много и она должна быть всегда под рукой. И доступ к ней должен быть как централизованный, так и с занятий.  Мы долго и муторно сортировали литературу по авторам и стилям. Делали сводные страницы по подразделам, дополнительные боковые меню навигации, перекрестные ссылки. Но научились ситематизировать. И понимать, в каком случае страница по клику должна открыться в том же окне, а в каком - в новом. Всегда советую найти такую область сайта, где можно потренироваться. Чем потом на ходу переделывать уже работающий сайт. 

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

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

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