Основы сайтостроения - Разработка структуры сайта

webmaster - Основы сайтостроения

Из рубрики: Начинающему Web-мастеру. С чего начать и как создать сайт самому. Основы сайтостроения.

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

Жизнь сайта можно условно разделить на следующие этапы:

1 - Идея2 - Разработка структуры3 - Разработка оформления4 - Кодинг. Программирование5 - Тестирование и доработка6 - Продвижение и реклама7 - Дальнейшая поддержка и обновления

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

Разработка структуры

Структуру сайта можно условно разделить на внешнюю и внутреннюю.

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

Рассмотрим разработку внутренней структуры на примере домашней страницы. Какую информацию мы можем на ней разместить? Рассказ о себе (на главной странице), свои фотографии, контактную информацию - это по минимуму. Значит, внутренняя структура нашей домашней странички прорисовывается такая:

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

 

 

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

(правда поиск можно располагать где угодно, на картинке поиск обозначен в стандартном исполнении):

 

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

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

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

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

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

Не верьте зложелателям, которые вас уверили, что дизайн - это дело вкуса: что хочу, то и ворочу.

Это не правда.

Дизайн - это целая наука. Чтобы овладеть ей, вам придется ознакомиться с такими понятиями, как колористка (теория цвета), композиция, шрифт, и многими другими. На сайте webfocus.ru в разделе "Web-мастеру" есть неплохая подборка на эту тему. Не поленитесь, скопируйте страницы и в спокойной обстановке изучите. Говорят, помогает;)

Что ж, продолжим.

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

Основные используемые растровые редакторы: Adobe Photoshop, Image Ready.

Основные векторные: Corel, Adobe Illustrator.

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

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

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

Какие же приемы вы можете использовать для достижения единства в вашей композиции: наложение объектов друг на друга, тем самым, показывая их близость, ваши элементы могут быть выполнены в одной манере, стиле. Какие-то элементы композиции могут повторяться и перекликаться друг с другом в цвете, текстуре, по форме и т.д.

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

Это достаточно сложно и не каждому удается найти верное решение, не у всех есть художественный вкус, талант и задатки, но об этом нужно говорить, для того, чтобы хотя бы понять основу дизайна в сайтостроении, быть может у вас скрытые таланты, которым не хватает маленький толчок?

Кодинг и программирование

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

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

За то, что вы видите в определенной последовательности на странице текст и картинки, отвечает язык разметки текстовых документов HTML.

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

Итак, кодинг и программирование оказывается тоже достаточно сложный этап в создании сайта.

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

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

Тестирование и доработка

Когда сайт готов, его выкладывают в сеть (интернет). Для этого вам нужно завести для сайта доменное имя (адрес), и хостинг (место для вашей страницы).

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

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