Делай сам. Делай лучше нас. Самостоятельное создание сайта в Волгограде.

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

Создание сайта на HTML. Волгоград

     В этой статье я расскажу как создавать полноценный сайт в Волгограде. При этом вы будете создавать сайт сами, не используя заготовки, шаблоны предоставляемые тем или иным провайдером услуг хостинга. Будем делать это в специальных программах для визуального создания сайта, наподобие Dreamweaver от Adobe (а ранние версии от Micromedia), или просто в Блокноте Windows. Как угодно. Во многом это на любителя и вопрос и личной сноровки. Если понравятся какие-то другие визуальные HTML-редакторы, то пожалуйста, создавате сайты в Волгограде в них (на самом деле таких редакторов существуют десятки и десятки, о всех даже вскользь не сказать).

Создание сайта на HTML

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

Дизайн сайта-визитки, созданного в Волгограде

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

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

Создание системы навигации по сайту

     После непродолжительной подготовки и прикидок получилась следующая структура сайта. Первая страница как всегда это - Главная страница. Как правило это файл index.html, index.htm, index,shtml, реже main.html. А в принципе имя этого файла может быть какое угодно. Просто существуют определенные устоявшиеся традиции по поводу имен файлов web-страниц и веб-ссылок. Пока это пустая страница, на ней (правильнее сказать, в ней, в самом файле страницы) есть несколько ссылок. Первая - на саму себя, на главную. другая - на флеш-содеримое, и третья на сайт компании Macrimedia, с которого можно сказать и установить плагин к браузеру для проигрывания флеш-содержимого.
     Главную страницу сайта не нужно загромождать ссылками. В нашем случае их всего две - ссылка на персональные закладки и страницу, описывающую процесс создания самого этого сайта с нуля. Они будут в верху страницы и расположены горизонтально. На каждой из других страниц будут ссылка на форум и ссылка на email. Получается, таким образом, что все страницы почти одинаковы. В левой части будут размещены ссылки на темы сайта (на другие, второстепенные, страницы). Это такие страницы как "О компании", "Наша продукция", "Связь с нами", "Каталог услуг", "Каталог товаров", "Фото продукции", "Способы оплаты", "Договор, гарантии и сертификаты" и прочее. Говоря о навигации по сайты, мы про между прочим обозначили еще один компонент дизайна - вертикальное и горизонтальное меню. Безусловно меню будет занимать свободное пространство страницы, но решает вопрос взаимной связи между различными страницами и разделами, т.е с любой страницы второго и последующих уровней вложенности можно сразу перейти на любую другую страницу или раздел, расположенные в другом уровне, в том числе и на главную страницу сайта.

Подготовка текста для сайта

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

Подготовка графики для сайта

Сканирование изображений и репродукций

     С помощью сканера можно и самому перевести бумажный вариант необходимых изображений в электронный. Запускаем Photoshop, в меню File выбираем команду Import, далее Twain. Запустится драйвер сканера, прогреет его. Делаем превью сканера (черновое сканирование). После этого делаем выкадровку (указываем сканеру что нужно отсканировать это изображение от сих до сих, с таким то качеством, четкостью, глубиной цвета, коррекцией яркости и контрастности). Имейте ввиду, что отсканированное цветное изображение формата А4 даже в нормальном качестве (не говоря о хорошем или самом высоком из возможных для данного сканера) занимает в виде файла на диске весьма внушительное место - до нескольких сот мегабайт.

Обработка фотографий

      Обычно для размещения на веб-страницах нужны файлы с разрешением не более 72 dpi (dots per inch, т.е.означает плотность сканирования выраженную в количестве точек на линейный дюйм - 2,5 см). До этого разрешения нам нужно уменьшить полученные нами при сканировании (или имевшиеся изначально с цифровой камеры) фотографии. Кроме того, следует учитывать настоящие размеры на экране. К примеру, если подразумевается просмотр фото на мониторе с разрешением 800x600 пикселей (точек), не следует размещать на сайте фото с размерами 1500x1000 точек (ну если только это не план-карта какого либо города или политическая карта земного шара), где в любом случае необходимо будет размещать скроллеры для прокрутки изображения.

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

Возвращаемся к дизайну создаваемого сайта

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

Графический текст

     Сначала надо решить какие будут размеры у графических элементов интерфейса. Допустим у нас высота логотипа 60 пикселов, ширина - 400. В Photoshop создаем сайт с указанными размерами. В нем создаем слой фона, на котором нужно разместить изображение бересты, отсканированное ранее. В палитре Слоев создается еще один слой, в котором инструментом Текст пишется название сайта (которое будет отображаться на логотипе. Берем шрифт размером 40 микселов, так как высота текста логотипа должна быть приблизительно две третьих от высоты логотипа, устанавливаем шрифт без засечек и полужирное начертание. Растрируем этот слой (превращаем текст в рисунок), выделяем текст инструментом "Волшебная палочка" Photoshop и заполняем выделение растровой заливкой. Заливка должна быть немного темнее шрифта. В результате получается эффект будто буквы логотипа вырезаны на бересте.

Другие элементы оформления сайта

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