Файл: Тема webдизайн план.docx

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

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

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

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

При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были "смысловыми": впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если имена файлов будут выглядеть, например, как l.htm, 2.htm, 3.htm и т. д.

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

Имя файла	Директория	Описание	Дата создания/последнего изменения
index.html	/mysite	Стартовая страница сайта http://www.mysite.ru	1.07.2000
index.html	/mysite/family	Стартовая страница раздела <моя семья>	5.07.2000
wife.htm	/mysite/family	Рассказ о моей жене	5.07.2000
son.htm	/mysite/family	Рассказ о моем сынишке	5.07.2000
pid-jpg	/mysite/photos	Моя фотография на пляже в Сочи	6.07.2000

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

Заглавная страница

Один из критериев, руководствуясь которым можно разделить различные web-сайты на две основные категории, - это наличие заглавной страницы (splash) или отсутствие таковой.

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

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

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

Верстка web страниц

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

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

Чтобы реализовать указанную задачу надо понимать, как вообще происходит верстка веб-страниц и соизмерять свои идеи с их исполнением.

Особенности верстки документов сайта.

Ширина документа

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

Фиксированный макет

В данном случае действуем от обратного и устанавливаем общую ширину макета жестко заданной и равной определенной величине. Если взять некоторую обобщенную статистику посетителей сайтов и посмотреть, какое разрешение монитора они преимущественно используют, то узнаем, что это 800 х 600 и 1024 х 768 пикселов. Получается, что ширина монитора пользователей в основном 800 и 1024 пиксела. Возьмем за ориентир 800 пикселов, тогда общая ширина макета за вычетом вертикальной полосы прокрутки и рамки браузера окажется 770–790 пикселов. На этот размер ориентируемся и устанавливаем ширину макета, например 770 пикселов.

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

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

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

«Резиновый» макет

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

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

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

Высота документа

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

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

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

Объекты веб-страницы прямоугольны

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

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

Данная особенность породила некоторые техники связанные с версткой, которые перечислены далее.

Активное использование рисунков

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

Разрезание изображения на фрагменты

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