В первую очередь - с Новым Годом вас, дорогие
читатели! Те из вас, кто получает другие рассылки от subscribe,
уже наверняка начитались поздравлений выше крыши (ну, не знаю
как вы, но я уж точно) - поэтому я перейду сразу к делу.
Для тех новых подписчиков, кто не читал предыдущие
заметки: речь пойдёт о практической реализации блочного дизайна.
(а если кто не знает, что такое блочный дизайн, или подзабыл со
времен былого обсуждения - пожалуйте сюда : http://redrival.com/maxvt/r/articles/006.html
и освежите вашу память).
Для "чисто конкретных дизайнеров" :)
- в этой заметке речь идет только о верстке (хотя ниже
есть немного и о других вещах - но к заметке это не относится).
Если вам это неинтересно - просто стирайте это письмо и сэкономьте
свое время. С другой стороны, если вам это интересно или если
вы, как и я, делаете (можете делать) все работы на своем сайте
самостоятельно, то эта заметка может вам пригодиться.
Cуть блочного дизайна в изменении внешнего вида страницы
в зависимости от ширины экрана посетителя - первый шаг на пути
к "личному сайту", возможности каждого посетителя настраивать
дизайн, формат, объем и прочие характеристики сайта по своему
вкусу. В самом простом варианте, от разрешения зависит количество
колонок с содержанием в макете страницы.
640х480
1 столбец
800х600
2 столбца
1024х768+
3 столбца
Если обобщить дальше, то блочный дизайн вырастает
в модульный: сайт составлен из "блоков", которые
можно раскладывать по узлам сетки страницы по желанию пользователя
и настраивать по отдельности в широких пределах. Это, например,
My Yahoo! и прочие сайты, на которых можно создать страницы
со своим содержанием - хотя там возможность свободно двигать блоки
информации по странице и менять их оформление очень ограничена.
Федя
Петрович
Васисуалий
В этот раз я расскажу вам, как реализовать простейший
вариант блочного дизайна - подбирать количество колонок в макете
страницы в зависимости от размера экрана клиента. Перейдем же
к делу!
Прежде, чем реализовывать что-либо, зависящее от
размера экрана, нужно этот размер определить. Тут нам на помощь
приходит небольшой ява-скрипт, написанный А. Владимировым
для одной полезной статьи на сайте "Клуб
Дизайнеров" :
(1). Определение
разрешения (Javascript)
<html>
<body> <script language="JavaScript">
<!-- // Сначала определяем разрешение
if (self.screen) { // для браузеров 4-тых версий
width = screen.width
height = screen.height
}
else if (self.java) { // для NN3 (enabled Java)
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}else{
width = height = 'x' // для прочих браузеров
} // Теперь выполняем нужное действие
if (width < 641) {
location.href='640/index.html' }
else if (width == 800) {
location.href='800/index.html' }
else if (width == 1024) {
location.href='1024/index.html' }
else if (width > 1279) {
location.href='hi-res/index.html' }
else {
location.href='default/index.html' }
//-->
</script> </body>
</html>
Теперь мы знаем, как получить ширину экрана. Но
этого недостаточно - надо полученные результаты использовать.
Как? Я могу сообразить всего 3 варианта дальнейших действий:
Использовать на месте.
После определения разрешения идёт другой скрипт, который вставляет
(или вырезает) куски документа "по ходу" - в процессе
загрузки страницы. Сервер в этом процессе не участвует, его
дело - передать весь документ.
Передать информацию на сервер.
В (1) скрипт использует
этот путь и перенаправляет посетителя в один из каталогов на
сервере, в зависимости от разрешения. Понятно, что если ваш
сайт не создается автоматически (по шаблонам и т.д.), то этот
вариант нереален. Но ведь есть и другие способы - например,
передать информацию CGI-скрипту, вот так: location.href='index.html?res=800'
или в другом, более удобном виде. Сервер на основе этой
информации составит нужный образ страницы и передаст его в ответ
на запрос. (вариант требует поддержки CGI, или ASP, или PHP
и иже с ними).
Сохранить информацию у клиента.
Лучший способ для этого - "печеньица" (cookies :-).
Когда клиент выдаст следующий запрос, все cookies передадутся
на сервер и соответствующая информация будет выдана посетителю.
Те же требования к серверу, как и у варианта 2.
Вдобавок, некоторые посетители отключают cookies - поэтому для
них это может не сработать. Зато можно настроить вид сайта по
желанию посетителя - например, тов. Иванов, дизайнер в третьем
поколении, имеет 21" монитор и наслаждается жизнью на экране
1600х1200; но хочет видеть ваш сайт в варианте для 800 пикселей
- и вы ему такую возможность предоставляете. Заодно cookies
могут хранить и другие настройки клиента, и поэтому я постараюсь
их рассмотреть подробно.
Следующий выпуск "Заметок": разбираем по косточкам
вариант первый: создавать страницу нужного вида "не отходя
от кассы" - прямо на компьютере посетителя.
Публичная, но не порка
Cудя по отзывам - вам понравилось! Давайте-ка поднапряжемся
еще раз и обсудим дизайн сайта, большинству подписчиков неизвестного:
единственный интернет ресурс, официально прелагающий погоду
от Уральского Гидрометцентра - http://meteo.statinfo.ru/.
Сайт вряд ли пригодится сам по себе тем, кто не
живет на Урале или не собирается туда поехать, но что-то меня
привлекло в его дизайне. Хотелось бы узнать и ваше мнение.
Новая статья была обнаружена недавно в ру/ководстве
- "Экранная типографика". Если вы читали (или хотя бы
открыли прочесть) эту статью, то уже наверняка заметили, что я
этим Надесктопным справочником не пользуюсь при
написании "Заметок". И это неспроста. Почему, как вы
думаете? И стоит ли вообще?
Ваше мнение будет оценено и опубликовано, если
пошлете его сюда: typo@zametki.org
Новая книга
Веб-дизайн. Книга Якоба Нильсена
Я заказал эту книгу, еще когда она была в печати.
Неделю назад она ко мне пришла по почте -- пришлось прочесть :)
Я обязательно поделюсь с вами впечатлениями о ней, но хотелось
бы узнать ваше мнение - тех, кто тоже прочитал эту книгу. Полезная
ли она? Порекомендовали бы вы ее другим? А подписчикам "Заметок"?