Created using
htm2chm 3.0

Download it NOW!


Статья раздела Web-дизайн. 800х600

Комментарий к первой ссылке
Комментарий к четвертой ссылке
Комментарий ко второй ссылке
Комментарий к третьей ссылке
Комментарий к пятой ссылке
Комментарий к шестой ссылке
Это демонстрационная страница раздела Web-дизайн
Посмотреть как эта страница выглядит в режиме 1024х768

Проблема, которая заботит большинство дизайнеров. К адаптации Web-страниц на различные типы браузеров добавилась новая проблема - адаптация на различные видеорежимы. "Резиновый" дизайн не всегда хорош там, где нужно сохранить позиционирование, также если страница имеет заголовочный рисунок на всю ширину Web-страницы. При высоких разрешениях страница вытягивается, строчки становятся длинными, что сказывается на удобстве читаемости. При фиксированной ширине, а ее обычно рассчитывают 800х600 остается почти половина монитора пуста в 1024х768 и выше. Выходов из подобной проблемы несколько:

  • Использовать включения на стороне сервера (SSI). Это самый лучший способ, но не все серверы, особенно бесплатные хосты, дают такую возможность.

  • Использовать CGI-скрипты. Где-то я это слышал, но не считаю, что это простой путь. Там кроются свои проблемы, да и не все серверы дают такую возможность.

  • Использовать JavaScript. Думаю, это самый реальный способ, но и этот способ предполагает различные пути. Вот об этом и будет разговор.

    Чтобы определить видеорежим достаточно опросить свойства width и height объекта screen:

    <script language="JavaScript">
    <!--
    var height=0;
    var width=0;
    width = screen.width
    height = screen.height
    //-->
    </script>
    Соответственно мы получим переменные, значения которых будем использовать в дальнейшем для формирования страницы. Следует иметь в виду, что использовать лучше только одну переменную - width, так, как значение ее не будет зависеть от различных типов браузеров. Так например значение height при 800х600 в MSIE будет 600, а в NN - 553. Итак, мы определили видеорежим пользователя. Теперь остается только решить: загружать нужную страницу, проверив значение или сделать страницу "универсальной".
    Начнем с самого простого: - имеем дубликаты страниц на различные видеорежимы и производим автоматическую загрузку нужной.

    <script language="JavaScript">
    <!--
    if (width>800)
    self.parent.location="index1024.htm";
    else
    if (width ==800)
    self.parent.location="index800.htm";
    else
    self.parent.location="index640.htm";
    //-->
    </script>
    ну и позаботимся о браузерах не поддерживающих JavaScript:
    <noscript>
    <a href="index800.htm">ENTER</a>
    </noscript>
    Вот и решена проблема таким образом, но вот только где разместить этот скрипт? В отдельном файле? - Можно. А можно и на первой загружаемой странице, а также и на всех страницах, так, как пользователь может зайти вовсе не на первую страницу из поисковой системы. Внимание, чтобы исключить рекурсию в этом случае загрузку "саму себя" не нужно включать!
    Проблема в таком подходе одна: приходится дублировать каждую страницу сайта.

    Второй способ несколько сложнее, но он не предполагает дублирование страниц. Например, мы формируем переменные типа:

    <script language="JavaScript">
<!--
table800='<table border="0" width=776 cellspacing=0
        cellpadding=0>';
table1024='<table border="0" width=1000
        cellspacing=0 cellpadding=0>';
img800='<img src="img800.gif"
        width=775 height=110 border=0 alt="">';
img1024='<img
        src="img1024.gif" width=999 height=110 border=0 alt="">';
// и так
        далее...
//-->
</script>
Далее остается только
        в нужном месте выполнить:
<script
        language="JavaScript">
<!--
if (width>800)
        {
document.writeln(table1024);
......
document.writeln(img1024);
......
}
else
        {
document.writeln(table800);
......
document.writeln(img800);
......
}
//-->
</script>

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

    <script language = "JavaScript">
    if (width < 801) {
    var a='!';
    document.write('<'+a+'--');
    }
    </script>
    Пишем любой текст и любые теги для режима более 800х600
    <!-- -->

    <script language = "JavaScript">
    if (width >800) {
    var a='!';
    document.write('<'+a+'--');
    }
    </script>
    Пишем любой текст и любые теги для режима 800х600 и менее
    <!-- -->
     Этот метод хорош тем, что не нужно выводить HTML через document.writeln(), а писать обычно. Внимание, в тексте HTML до <!-- --> нельзя писать комментарии! Программа формирует первый тег комментария по условию, а закрывается тегом в самом тексте HTML, тем самым исключая ненужное. Это самый простой, пожалуй метод и не требует больших JavaScript наворотов. Единственный недостаток в том, что если зайти браузером не поддерживаемом JavaScript - такая будет "куча-мала".

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