Отправляет email-рассылки с помощью сервиса Sendsay

Заметки Дизайнера

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2001   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

56.649 подписчиков
-141 за неделю
←   Все выпуски   →

Заметки Дизайнера Блочный дизайн : реализация (часть 1)


Служба Рассылок Subscribe.Ru проекта Citycat.Ru

заметки дизайнера
Выпуск 17 - 1 января 2001 
http://come.to/zametki

Блочный дизайн: варианты реализации

часть 1: определяем разрешение
 

В первую очередь - с Новым Годом вас, дорогие читатели! Те из вас, кто получает другие рассылки от 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. Использовать на месте. После определения разрешения идёт другой скрипт, который вставляет (или вырезает) куски документа "по ходу" - в процессе загрузки страницы. Сервер в этом процессе не участвует, его дело - передать весь документ.
  2. Передать информацию на сервер. В (1) скрипт использует этот путь и перенаправляет посетителя в один из каталогов на сервере, в зависимости от разрешения. Понятно, что если ваш сайт не создается автоматически (по шаблонам и т.д.), то этот вариант нереален. Но ведь есть и другие способы - например, передать информацию CGI-скрипту, вот так: location.href='index.html?res=800' или в другом, более удобном виде. Сервер на основе этой информации составит нужный образ страницы и передаст его в ответ на запрос. (вариант требует поддержки CGI, или ASP, или PHP и иже с ними).
  3. Сохранить информацию у клиента. Лучший способ для этого - "печеньица" (cookies :-). Когда клиент выдаст следующий запрос, все cookies передадутся на сервер и соответствующая информация будет выдана посетителю. Те же требования к серверу, как и у варианта 2.
    Вдобавок, некоторые посетители отключают cookies - поэтому для них это может не сработать. Зато можно настроить вид сайта по желанию посетителя - например, тов. Иванов, дизайнер в третьем поколении, имеет 21" монитор и наслаждается жизнью на экране 1600х1200; но хочет видеть ваш сайт в варианте для 800 пикселей - и вы ему такую возможность предоставляете. Заодно cookies могут хранить и другие настройки клиента, и поэтому я постараюсь их рассмотреть подробно.

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

Публичная, но не порка
 

Cудя по отзывам - вам понравилось! Давайте-ка поднапряжемся еще раз и обсудим дизайн сайта, большинству подписчиков неизвестного: единственный интернет ресурс, официально прелагающий погоду от Уральского Гидрометцентра - http://meteo.statinfo.ru/.

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

Адрес для корреспонденции: neporka@zametki.org

 

Свежатинка
 

Новая статья была обнаружена недавно в ру/ководстве - "Экранная типографика". Если вы читали (или хотя бы открыли прочесть) эту статью, то уже наверняка заметили, что я этим Надесктопным справочником не пользуюсь при написании "Заметок". И это неспроста. Почему, как вы думаете? И стоит ли вообще?

Ваше мнение будет оценено и опубликовано, если пошлете его сюда: typo@zametki.org

 

Новая книга

Веб-дизайн. Книга Якоба Нильсена
 

Я заказал эту книгу, еще когда она была в печати. Неделю назад она ко мне пришла по почте -- пришлось прочесть :) Я обязательно поделюсь с вами впечатлениями о ней, но хотелось бы узнать ваше мнение - тех, кто тоже прочитал эту книгу. Полезная ли она? Порекомендовали бы вы ее другим? А подписчикам "Заметок"?

С нетерпением жду ваших отзывов book_nielsen@zametki.org



До новых встреч в новом году - ваш MaxVT
пишите письма: maxvt@zametki.org
http://subscribe.ru/
E-mail: ask@subscribe.ru
Поиск
В избранное