Отправляет 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
Автор
Дмитрий

Статистика

535 подписчиков
0 за неделю
←   Все выпуски   →

Веб-дизайн. От А до Я. # 9


Служба Рассылок Subscribe.Ru проекта Citycat.Ru
Веб - Дизайн. От А до Я.
# 9
3 мая 2001г.
Проект сайта "AGS Design" http://dweb.ru
кол-во подписчиков - 5500

    В этом выпуске:

    Ссылки Вебмастеру:
  • Web-дизайн, архив рассылок
  • Анимация и графика
  • Иконки и кнопки
  • Flash и Photoshop
  • Доска объявлений
  • Фоновые изображения
  • Баннер-Форум
  • Баннеры
  • Все скрипты
  • Фото
  • 3D анимация
  • ЧаВо
    • Доброе время суток!


    Баннерная & Текстовая сеть TBE.


    TBE (Tranzit Banner Exchage) - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Сеть основана на технологии BannerBankа. Поддерживаются типоразмеры баннеров 120х60, 468х60, 125х125, 100х100, и текстовые блоки. Коммисия 10%. Показывая 100 рекламных баннеров, Вы заработаете 90 показов Ваших баннеров или текстовых ссылок! Каждому новому участнику 20,000 БЕСПЛАТНЫХ показов! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru/go/

    		Оглавление/Вверх


    Как совместить пиксел к пикселу фон и содержимое во всех браузерах.


    Я постоянно слышу, как начинающие дизайнеры жалуются что, когда им нужно совместить какую-то картинку и фон, то в разных браузерах выглядет по разному. Многие говорят, что выхода нет. Я тоже так думал и постоянно создавал javascript, который бы выбирал, какой Background использовать для разных броузеров.
    Я нашёл выход и теперь не понимаю, как я раньше не догодался! Работает он с MSIE3, MSIE4, NN3, NC4. Напомню, что 97% юзеров используют один из них (или два (или три, как я)). Сразу предупреждаю, что я не скажу ни слова о CSS, так как мой способ работает для всех броузеров, включая NN3.
    Сначала я покажу разницу в том, как работают MSIE и NETSCAPE с margins, а потом напишу code, который нужно использовать. Также я полностью уверен, что другого выхода нет
    !!!
    Речь поведу о третей и четвёртой версиях Нетскейпа. Они обе ничем
    не отличаются в плане margins, кроме того, что в четвёртой версии введён тэг <BODY MARGINWIDTH=# MARGINHEIGHT=#>, подобный тэгу MSIE <BODY TOPMARGIN=# LEFTMARGIN=#>, который присутствует в третей и четвёртой версиях MSIE. Разумеется Netscape не захотел просто взять и использовать такие же имена для параметров, и использовал параметр когда-то придуманного ими тэга для <FRAME MARGINWIDTH=# MARGINHEIGHT=#>, о загадочности которого я ещё расскажу.
    То есть можно подвести маленький итог! Используя <BODY MARHINHEIGHT=0 MARGINWIDTH=0 TOPMARGIN=0 LEFTMARGIN=0> в MSIE3, MSIE4 и NC4, можно абсолютно избавиться от margins.
    На этом я мог бы и закончить свою статью, но вы скажите: "А какже NETSCAPE 3? 40% юзеров его используют." Так вот именно поэтому я и пишу эту статью.
    В чём главная проблема! Как вы и поняли в NC4 можно контролировать расположение content'а на страничке. Но! В Нетскейпе 3, увы нельзя. Что бы вы не делали, у вас всегда будет margin сверху и слева около 5 пикселов. Я точно не знаю сколько. Достаточно много. Единственный способ от них избавиться, это... использовать фреймы
    ! Да, да, фреймы! Нужно просто напросто создать два фрэйма:
    <FRAMESET ROWS="*,0">

    Первый фрэйм - это ваша страничка, а второй пустой. Лучше всего туда положить
    <HTML></HTML>

    Сделав это, вы мне скажите: "Всё равно есть граница. Дело в том, что вы забыли, что главный фрэйм дожен иметь при себе MARGINHEIGHT=0 MARGINWIDTH=0:
    <FRAME NAME="home" SRC="home.html" MARGINHEIGHT="0" MARGINWIDTH="0">

    Перед тем, как это сделать, проверьте, чтобы в файле HOME.HTML, не было MARGINGHEIGHT и MARGINWIDTH в таге BODY. Иначе вы можете испортить совместимость страницы в NN3 и NC4.
    Сделав это, вы заметите проблему. В обоих нетскапах всё выглядит одинаково: вы увидите границу в один пиксел сверху и слева, но в MSIE границ вообще не будет. Поэтому, вам надо поставить
    <BODY TOPMARGIN=1 LEFTMARGIN=1>

    в HOME.HTML. Теперь похоже, что одинаково. Но нужно кое-что доработать. Во-первых во второй фрэйм нужно поставить
    <FRAME ... NORESIZE SCROLLING=NO>

    А в FRAMESET:
    <FRAMESET ROWS="*,0" BORDER=0>

    Если не будет BORDER=0, то у вас появится белая полоска внизу в MSIE. Проблема, которую я не мог устранить, это белая полоска внизу у NN3 и NC4, даже если есть BORDER=0. Чего я только не добавлял в <FRAMESET> и <FRAME>. Я попробовал всё: BORDER=0, FRAMESPACING=0, FRAMEBORDER=0|NO. Если вы найдёте выход, то напишите мне. Но нас это не должно сильно волновать. Нам нужно избавлятся от границ. Цвет той полоски, можно поменять в <BODY BGCOLOR> в пустом файле.

    Ну что ж, кажется всё я сказал. И теперь покажу вам код... О! Забыл. Я забыл рассказать, как я до сих пор не могу понять загадачность MARGINWIDTH и MARGINHEIGHT в Нетскапе 3 и 4. Попробуйте сами, и вы упадёте со стула, когда увидите, как Нетскэйп сам себя обманывает.
    Попробуйте убрать в тэге <FRAME> параметр MARGINHEIGHT=0. И взгляните на страницу в обоих Нетскэйпах. Верхняя граница вообще исчезнет, а левая останется! Теперь поставьте обратно и уберите MARGINWIDTH=0. Левая граница исчезнет, а сверху будет один пиксел! А теперь прикол, уберите оба параметра! Вы получите ту самую, четырёх-пяти пиксельную границу.

    А теперь попробуйте объяснить мне эту закономерность в Нетскейпе! Теперь надеюсь вы поняли, что в Нетскапе 3 невозможно избавиться от обеих границ сразу. Считаю, что самым оптимальным вариантом было бы иметь один пиксел слева и сверху. И вот для этого код:

    <HTML><HEAD>
    <TITLE></TITLE>
    </HEAD>
    <FRAMESET ROWS="*,0" BORDER=0>
    <FRAME NAME="home" SRC="home.html" MARGINHEIGHT="0" MARGINWIDTH="0">
    <FRAME NAME="empty" SRC="empty.html" NORESIZE SCROLLING=NO>
    </FRAMESET>
    </HTML>

    HOME.HTML:

    <HTML><HEAD>
    <TITLE></TITLE>
    </HEAD>
    <BODY TOPMARGIN=1 LEFTMARGIN=1>
    Your stuff
    </BODY>
    </HTML>

    EMPTY.HTML:

    <HTML>
    <BODY BGCOLOR=#FFFFFF> (в зависимости от цвета в главном фрэйме)
    </HTML>

    С этим кодом, вы можете смело создавать BGэшки и совмещать их с contentом на страничке. Выглядить всё будет одинаково во всех броузерах (97%). Под словом "всё" я подразумеваю границы.
    Единственная проблема - эта та полоска внизу в Нетскапах.
    Если вы нашли спорный момент в моей статье, пожалуйста сообщите.
    Роман Родичев
    		 Оглавление/Вверх


    Слой за слоем.


    Создавая HTML-страницу, постоянно сталкиваешься с проблемой позиционирования элементов на странице относительно окна браузера. И вот почему. Особенностью HTML-языка является его четко установленная условность, т.е. предопределенность отдельных действий и событий, в зависимости от использования определенных тэгов и их характеристик, а также, от настроек браузера. Таким образом, в самом простом случае, элементы на странице будут позиционироваться в том порядке, в каком они поставлены в исходном коде. Небольшие отличия, в зависимости от браузера, будут наблюдаться только в горизонтальном и/или вертикальном выравнивании, цветах ссылок, способе обтекания объекта текстом и в некоторых других случаях.
    Проблему решают таблицы.

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

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

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

    Слои создаются двумя способами: с помощью тэга DIV (Евангелие от Microsoft) и тэга LAYER (ILAYER) (Евангелие от Netscape) :). Это парные тэги и действуют они одинаково - выделяют участок документа. Но отличаются они тем, что:

    1. Netscape считает себя центром вселенной;
    2. Microsoft считает себя (см. пункт 1);
    3. У каждого из них свой взгляд на развитие Интернет-стандартов.
    4. В результате, для определения характеристик тэга DIV используются свойства CSS, а для тэга LAYER (ILAYER) - стандартные характеристики HTML-тэгов;
    5. Тэг DIV предоставляет больше функциональных возможностей, чем тэг LAYER (ILAYER);
    6. Противоборствующими сторонами тэги противника не поддерживаются :(.

    Поскольку тэг DIV более "гибок" и более функционален, рассмотрение означенной темы мы начнем именно с него.

    Итак, тэг DIV размечает слой в документе. С помощью свойств CSS ему назначаются вертикальные и горизонтальные координаты (начало, местоположение, ширина и высота), а также плоскостные координаты относительно самого документа. Для этого применяются такие свойства, как position, top, left, width, height, margin и z-index.

    Если вы читали мою прошлую статью, посвященную CSS, то вы уже знаете, что position имеет три значения: absolute, relative и static. В случае со слоями используются только два первых, так как использование третьего может привести к неожиданным и не очень желательным результатам.

    Если вы помните, position:absolute устанавливает элемент в определенное положение относительно окна браузера, а position:relative - относительно его места в исходном коде. Таким образом, наделив тэг DIV свойством style="position:absolute", мы указываем, что слой будет иметь своё собственное место в документе и никакой другой элемент никоим образом не может повлиять на его расположение.

    Используя свойства top и left, мы устанавливаем, соответственно, верхнюю и левую границы начала слоя: style="position:absolute; top:0; left:0". А добавив свойства width, height и margin, мы определили его ширину, высоту и зону внутри слоя, в границах которой и будут располагаться все элементы: style="position:absolute; top:0; left:0; width:600; height:100; margin:10".

    После того, как мы создали слой, обладающий горизонтально-вертикальными параметрами, нам необходимо наделить его цветовым фоном (или оставить прозрачным) и определить (если необходимо) цвет текста, размещаемого на слое. Делается это посредством свойств background и color, а цвет задаётся как номером, так и его английским названием: style="position:absolute; top:0; left:0; width:600; height:100; margin:10; background:#8B0000; color:silver".

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

    Чтобы избежать этого и расположить перекрывающиеся слои в том порядке, в каком нужно вам, независимо от их места в исходном коде, используется z-index, который имеет положительное или отрицательное числовое значение: style="position:absolute; top:0; left:0; width:600; height:100; margin:10; background:#8B0000; color:silver; xz-index:-1". Слой, имеющий такой z-index, будет расположен ниже слоя, имеющего z-index, равный 1.

    Итак, в исходном коде запись, указывающая на создание слоя, будет выглядеть так:

    <DIV style="position:absolute; top:0; left:0; width:600; height:100; margin:10; background:#8B0000; color:silver; xz-index:-1"></DIV>

    Внутри парного тэга DIV располагаются все элементы, которые должны находиться в пределах этого слоя. Они будут иметь один и тот же z-index, идентичный z-index'у слоя и, зрительно, будут располагаться в окне браузера с левого края, в тёмно-бордовом прямоугольнике размером 590Х90 пикселов. А текст в этом прямоугольнике будет иметь светло-серый цвет с размером и гарнитурой шрифта, установленными по умолчанию для браузера. Если, конечно, для этого элемента размер и гарнитура не заданы свойствами CSS в тэге <P>.

    Однако, каждый элемент должен обладать своим собственным свойством position и, как минимум, topи left (расстояние от краёв слоя).

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

    <HTML>
<HEAD>
<TITLE>STARTING PAGE OF PCP WEB SITE</TITLE>
<META NAME="AUTHOR" CONTENT="D.M. SAGAYDAK">
<STYLE TYPE="TEXT/CSS">
<!-- P {FONT-FAMILY: "ARIAL, SANS-SERIF"; FONT-SIZE: 92} -->
</STYLE>
</HEAD>
<BODY BGCOLOR=#8B0000>
<DIV style="POSITION:ABSOLUTE; TOP:80; LEFT:70;
WIDTH:600; HEIGHT:100; MARGIN:10; COLOR:BLACK">
<P>PCP WEB SITE</P>
</DIV>
<DIV style="POSITION:ABSOLUTE; TOP:220; LEFT:70;
WIDTH:600; BACKGROUND:WHITE; HEIGHT:50">
<A HREF="HOME.HTML"><IMG SRC="HOME.GIF" ALT=HOMEPAGE
BORDER=0 HEIGHT=20 WIDTH=100 style="POSITION:ABSOLUTE; TOP:15;
LEFT:20; BACKGROUND:#8B0000"></A>
</DIV>
</BODY>
</HTML>
    Это самый простой пример позиционирования с помощью слоёв в среде MSIE.

    Теперь перейдём к созданию слоёв в среде Netscape.

    В Netscape участок документа под слой размечается с помощью тэгов LAYER и ILAYER. Также, используется вспомогательный тэг NOLAYER, но о нём позже.

    В отношении исходных границ позиционирования, тэг <LAYER> выполняет ту же функцию, что и тэг <DIV style="position:absolute", а тэг <ILAYER> аналогичен тэгу <DIV style="position:relative".

    Параметры слоёв LAYER/ILAYER задаются с помощью обычных свойств языка HTML: TOP, LEFT, WIDTH, HEIGHT, MARGIN. Параметры элементов, расположенных внутри слоя, задаются как обычными тэгами и свойствами языка HTML, так и свойствами CSS или JSS (язык, разработанный Netscape и, практически, аналогичный CSS).

    <LAYER TOP=0 LEFT=0 WIDTH=600 HEIGHT=100 MARGIN=10 >
    <FONT COLOR=RED ><P> ЭТО ПРИМЕР СЛОЯ В Netscape </P>
    </FONT></LAYER>

    <ILAYER TOP=20 LEFT=0 WIDTH=50 HEIGHT=50 MARGIN=10 >
    <IMG SRC="IMG.GIF" ALT=КАРТИНКА BORDER=0 HEIGHT=20 WIDTH=20 >
    <P> ЭТО ПРИМЕР ДРУГОГО СЛОЯ В Netscape </P></ILAYER>

    Наделив слой фоновым цветом bgcolor, вы можете получить результат, при котором элементы, находящиеся внутри слоя (между тэгами <LAYER></LAYER> или <ILAYER></ILAYER> , могут быть полностью перекрыты этим фоном и они станут недоступны. И хотя, теоретически, LAYER/ILAYER способен поддерживать свойство z-index, или, как любит читать Netscape, zindex :), я ни разу это свойство в этом тэге не использовал, не видел, чтобы кто-то ещё использовал и, если честно, не представляю, как его можно применить в данной ситуации.

    Ниже приведен пример страницы, написанной для Netscape.
    
<HTML>
<HEAD>
<TITLE>STARTING PAGE OF PCP WEB SITE</TITLE>
<META NAME="AUTHOR"CONTENT="D. M. SAGAYDAK">
<STYLE TYPE="TEXT/JSS">
<!-- P {FONTFAMILY:"ARIAL", "SANS-SERIF"; FONTSIZE:92} -->
</STYLE>
</HEAD>
<BODY BGCOLOR="#8B0000">
<LAYER TOP="80" LEFT="70" WIDTH="600" HEIGHT="100" MARGIN="10">
<FONT COLOR="BLACK"><P>PCP WEB SITE</P></FONT>
</LAYER>
<LAYER TOP="220" LEFT="150" WIDTH="600" HEIGHT="50" MARGIN="10">
<A HREF="HOME.HTML"><IMG SRC="HOME.GIF" ALT="HOME" BORDER="0"
HEIGHT="20" WIDTH="100"></A>
</LAYER>
</BODY>
</HTML>
    Если какой-то участок кода страницы не поддерживается Netscape, но он может и/или должен выполняться другими браузерами, используют тэг NOLAYER. С его помощью, внутри слоя отмечается неподдерживаемый участок кода, например VBS-скрипт, и браузер его "не видит", соблюдая при этом целостность слоя: <LAYER>...<NOLAYER>
    <SCRIPT NAME="VBS-script">...</SCRIPT>
    </NOLAYER></LAYER>.

    Точно таким же способом можно комбинировать на одной странице участи кода для Netscape и MSIE:

    <LAYER><NOLAYER>
    <DIV>
    </NOLAYER>...<NOLAYER>
    </DIV>
    </NOLAYER></LAYER>.

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

    Тэг LAYER (ILAYER) не обладает теми возможностями, которыми обладает DIV (благодаря Билу Гейтсу и 3WC :) ). Фактически, тэг LAYER (ILAYER) предназначен для разметки документа на участки, реагирующие на события с помощью сценариев (абракадабра из Dynamic HTML). Поэтому, конечно, слой с его помощью создать можно, но средств для его оформления и работы с элементами внутри слоя не хватает.

    Какой вывод можно сделать?

    Более всего, для создания и просмотра Web-страниц с использованием позиционирования слоёв и элементов на них, подходит Microsoft-версия языка HTML и, соответственно, браузеры этого производителя. Но Microsoft-версия языка HTML не является эталоном. Поэтому, широкое применение этой, без сомнения сильной и перспективной, технологии Web-дизайна возможно только с официальным признанием HTML 4.0 и DHTML новыми стандартами языка гипертекстовой разметки электронного документа.

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

    Дмитрий М. Сагайдак
    		Оглавление/Вверх


      Подпишитесь:
    Рассылки Subscribe.Ru
    Веб-дизайн, азы
    Веб-дизайн. Вопросы и ответы.
    Веб-дизайн. От А до Я.
      ICQ - Клуб
    Адрес Клуба http://dweb.ru/1/icq.htm

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

    Для вступления в icq-клуб присылайте # ICQ, Имя, E-mail, Город, и темы по которым возможна консультация.
    		Оглавление/Вверх
      Вы хотите публиковаться?
      Присылайте статьи или вопрос (по публикации) по этому адресу с пометкой "Статьи в рассылку". Гонорар за статьи - договорной (500-3000 показов RLE).

    Ведущий рассылки Дмитрий Давыденко

    http://subscribe.ru/
    E-mail: ask@subscribe.ru
    В избранное