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

Рецепты HTML

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

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

←   Май 2003   →
 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
Автор
Влад Мержевич

Статистика

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

Рецепты HTML # 89


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru
Компания ЗАО М1-Диалог (www.horse21.ru) в десятых числах мая объявила о введении дополнительных выплат в популярной партнерской программе Horse21 (http://affiliation.horse21.ru). Теперь наряду с бронированиями отелей, системой оплачивается привлечение новых партнеров. Таким образом, международная система бронирования отелей Horse21 пошла навстречу пожеланиям информационных ресурсов Интернета, удовлетворив их просьбу по расширению направленности своей партнерской программы. С мая 2003 года сотни участников получают вознаграждение еще и за привлечение новых партнеров(рефералов), по 2 EUR за каждого. Таким образом, присоединиться и прибыльно функционировать в рамках ведущей туристической программы Рунета могут теперь ресурсы не только туристической или бизнес направленности, но и сайты посвященные web-дизайну, администрированию сайтов, рекламные сети, информационные издания, рассылки и прочие. Туристические сайты, в свою очередь, могут заметно увиличить прибыли от участия в партнерской программы Horse21. До 1 июня действуют специальные условия: за каждых трех новых рефералов, установивших код в течение апреля партнеру на счет начисляется комиссия не 6EUR, а 10EUR.

Добрый день.

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

Верстка с помощью слоев

До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, в виду их некоторого несоответствия принципам веб-дизайна и навигации, были объявлены злом и преданы остракизму. Любое использование фреймов, за редким исключением (например, в чатах), вызывало возгласы о том, что веб-мастер недостаточно профессионален и не понимает всех тонкостей создания сайтов. Что оставалось делать в этой ситуации верстальщикам, когда и вариантов не остается? Только переходить на таблицы. Поэтому верстка с использованием таблиц на долгое время стало определенным стандартом. Как только эти таблицы не применялись - и рамки делают, и модульные сетки задают, и цветной фон создают, и элементы выравнивают по разным краям. Конечно, это противоречит идеологии разделения оформления и содержания, но о такой "мелочи" никто и не вспоминал.

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

Преимущества слоев

Слои имеют следующие преимущества по сравнению с таблицами и фреймами:

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

    Создание слоев

    Слои предоставляют собой фрагменты HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Для создания слоя используется один из четырех тегов: DIV, SPAN, LAYER, ILAYER. Последние два тега поддерживаются только браузером Netscape и считаются устаревшими.

    Пример 1. Создание слоя

    <style>
    #layer1 {position:relative; font-size:50px; z-index:2; color: navy}
    </style>

    <div id="layer1">
    Содержимое слоя 1
    </div>

    <div id="layer2" style=""xposition:relative;" top:-55; left:5; color:orange; font-size:80px; z-index:1">
    Содержимое слоя 2
    </div>

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

    Виды дизайна

    Все многообразие дизайна можно свести к двум типам с условными названиями: "фиксированный" и "резиновый".

    При "фиксированном" дизайне макет страницы создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640х480 пикселей размер таблицы следует брать не более 619 пикселей. Для всех пользователей, сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Интернета является разрешение 800х600, разработчики сайтов ориентируются именно на него и используют ширину слоев 700-770 пикселей. И хотя тенденция идет в сторону увеличения разрешения, появление наладонных компьютеров, у которых количество пикселов как раз составляет 640х480, говорит о возврате на тот же этап.

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

    Фиксированный дизайн

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

     
       
    Рис. 1. Типичная модульная сетка при фиксированном дизайне

    Продолжение следует....

    Рекомендую подписаться на рассылку:
    CenterINet - все для начинающих и опытных web мастеров
    Всё о Photoshop
    Всё из мира графического редактора Adobe Photoshop. Еженедельно и только для вас в рассылке последние новости и обновления ресурса http://psd.eserver.ru. Не пропустите десятки увлекательных статей о Photoshop и компьютерной графике!
    Новичку, интересующемуся, профессионалу!
     

    •   Разделы сайта
     
    Создание сайта
      HTML
      CSS
      Динамический HTML
      Графика
      Дизайн
      Приемы верстки
      Инструментарий
      Справочная информация
      Шаблоны
      Форум

      Подписка на новости
      Введите ваш e-mail:
      Помощь
      Не знаете, с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
    Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
    Материалы сайта охраняются законом об авторском праве.
    Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
    http://subscribe.ru/
    E-mail: ask@subscribe.ru     		Отписаться
    Убрать рекламу
    В избранное