А это клавиатура, с помощью которой я творю...
http://kurepin.ru/php/design2/
Rambler's Top100
Пишем на PHP: Готовим дизайн (продолжение)

Продолжим формирование типовой страницы сайта.

Следующим "кирпичиком" предлагаю создать полоску быстрой навигации по сайту.

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

Предлагаю следующий inc-файл так и назвать — navigator.inc. И представим мы его в виде горизонтальной полосы.


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

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

Теперь сборку нашего сайта можно представить вот так:

*** заголовок ***
*** навигатор ***

== рабочее пространство ==

*** навигатор ***
*** копирайт ***

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

Чего у нас еще не хватает, помните? Еще нужны места под подробное/контекстное меню и рекламные блоки.

Давайте создадим еще несколько (пока пустых) файлов:

adv_top.inc — для горизонтальной рекламы вверху
adv_bottom.inc — для горизонтальной рекламы внизу
main_menu.inc — для главного меню

Ну, куда вставить рекламу — догадались сразу, не так ли? Теперь наша схема выглядит уже вот так:

*** заголовок ***
*** реклама ***
*** навигатор ***

== рабочее пространство ==

*** навигатор ***
*** реклама ***
*** копирайт ***

А куда же мы денем меню?

Придется нам распланировать и серединку — "рабочее пространство".

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

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


Определим пока ширину меню в 200 точек, а дальше видно будет.

В какой же файл нам положить этот текст... а ни в какой! Этот текст мы будем заряжать в каждый новый html-файл. Как это будет — скоро увидите.

Хотелось бы обратить ваше внимание на одну интересную тонкость web-дизайна. Наверняка вы обращали внимание, что на некоторых сайтах страница появляется только после полной загрузки, а на других — постепенно. Это связано с очень многими тонкостями. Попробую перечислить те, что знаю я.

Браузер. Каждый браузер обладает своими особенностями. Скажем, Netscape Navigator (NN) очень любит всосать в себя все, что отдает web-сервер, и только после получения последнего байта сгенерировать страницу. Это относится к тем версиям NN, которые мне были известны на момент написания этого текста.

Microsoft Internet Explorer (MSIE) ведет себя иначе. Начиная с четвертой или пятой версии он достаточно легко производит рендеринг страницы во время ее загрузки, изменения размера браузера и даже (чего не делает NN) реагирует на изменения свойств объектов уже загруженной страницы, вызываемые, скажем, Java Script (JS).

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

Что над помнить при форматировании страницы? Главное — помните о таблицах! Таблицы определяют 99% манеры появления страницы в окне браузера.

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

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

Первое — старайтесь не устраивать из таблиц русских матрешек. Это может сильно сказаться на слабых компьютерах.

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

Функции PHP. Да-да, друзья мои. Очень даже можно повлиять на порядок загрузки страницы при помощи функций PHP. Возможностей не так много, но они есть. И первая из них — функция flush().

По умолчанию, PHP сначала формирует в памяти всю html-страницу, а потом уже отдает ее apache, который в свою очередь отправляет ее пользователю.

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

Вот функция flush() как раз и позволяет форсировать отдачу уже созданного html-фрагмента пользователю. Это особенно удобно, когда страница долго формируется.

Поясню на примере.

Скажем, сайт представляет собой базу данных по всем автомобильным запасным частям фирмы Mercedes Bens. Сайт предлагает возможность поиска нужной запчасти по ее описанию в огромной базе данных, находящейся в другом городе. На это требуется время & mdash; несколько секунд. Чтобы сэкономить время пользователю и избежать эффекта "зависания сайта", мы читаем из файла заголовок страницы, после чего вызываем принудительную его отправку функцией flush(). Пока пользователь тянет по модему заголовок, рисунок, меню и другую муру, база успевает найти деталь, кою мы и отправляем следом пользователю. Идея понятна?

Этот пример можно смоделировать. Напишем код.
(здесь и далее я буду отставлять "?" от "<" пробелом, чтобы интерпретатор не отрабатывал скипты в боксе <textarea>, а показывал их)


И другой код


Как видите, они отличаются только наличием вызова flush().

Как отработает страница с первым кодом? Она появится у вас сразу и целиком через 10 секунд после обращения к серверу.

А вторая? А вторая напишет вам "Заголовок", а через 10 секунд покажет остальное.

Не верите? Смотрите сами (обновите несколько раз каждую страницу, чтобы убедиться в эффекте):

http://kurepin.ru/php/functions/no_flush.php

http://kurepin.ru/php/functions/flush.php

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

Вот на такие особенности открытия страниц желательно обращать внимание.

До завтра!

[шаг назад] [печатать] [в начало сайта]



copyright ©2000-2017 Ruslan Kurepin