Последние новости Новое в технологиях   
    
Сайт переведён на версию html/web 2.0. Старую версию сайта вы можете посмотреть здесь.
1. При использовании нестандартных шрифтов указывать в названии слоя обозначение (например sifr), а ...
    
     Верстка HTML/XHTML   
     
Поиск: только в текущем разделе
D'QUAD IT GROUP
Технологии :: D'QUAD Style / 

Верстка HTML/XHTML


Картинки

Все картинки сохраняются с логическим префиксом, сокращённом на английском тексте, на конце имеют размеры:


    например,


    неверно: bf1.gif


    верно: bottom_footer_400x10.png

Приоритет расширений – gif/jpg / png24.


    Все помнят, что GIF эффективно сжимает только горизонтальные одноцветные области? Про это ограничение теперь можно забыть:

GIF, 1823 байт

PNG-24, 282 байта

Вторым важным преимуществом является фильтрация строк (scanline filtering, или delta filters), благодаря которой PNG-упаковщик может получить гораздо более удобные данные для сжатия.

Gif – понимается любыми браузерами, не имеет альфаканала, но сжимается лучше, чем jpg, если картинка имеет менее 300-400 цветов, преимущественно сохранять в этом формате

JPG – баннеры, рисунки – используются в основном для размещения контента на страницах

Png – основной трабл в ie6, создавайте изображения, которые не будут тянуться или повторяться и находиться в положении 0% 0%, у фильтра есть возможность scale, т.е. допускается использовать растягивание картинки по всей высоте или длине, если это фоновый градиент.

Стандарты

Вёрстка начинает строиться со стандарта xhtml strict 1.1, таблицы используются только для контента и для областей, которые имеют смысловую нагрузку “таблица”, дабы не переделывать работу дважды – убедитесь у того, кто выше вас по иерархии, что вёрстка основных логических блоков закончена и получите одобрение на вставку таблиц

Принцип построения макета – разбиение на основные логические блоки, приоритет оптимизации макета под браузеры FF->IE7->Opera->IE 6, действуем по принципу от простого к сложному, поскольку Ie6 зачастую требует собственную таблицу стилей, поскольку плохо дружит с W3C. При сдаче вёрстки заказчику приоритет отображения имеет немного другую последовательность. Учитываем популярность браузеров и получаем следующую линейку IE 6 -> IE 7 -> FF -> Opera.

Комментарии

Любой логический блок требует выделения комментариями, используйте полные смысловые выражения для выделения блока, закрывающий тег отличается только наличием “/” .

Пример:

  1. неверно: <!-- block1 --> <div></div> верно: <!-- Left Menu Data Container --> <div></div> <!--/ Left Menu Data Container -->

Как часто комментировать? – Если блок содержит, например меню, то такой блок можно не комментировать, или если используются подряд 3-4 div для выделения 1 блока, например,

  1. <!-- Container Data --> <div id=”x1”>    <div id=”x2”>       <div id=”x3”>       Data       </div>    </div> </div> <!--/ Container Data -->

Если блок содержит уже 2 логических единицы информации, то обязательно наличие комментариев к каждому блоку.

Чеклист


-xhtml transitional


-cross ff,opera,ie7,ie6,ie8,safari


-логичное семантическое ядро


-комментарии блоков


-возможно использование sifr/typeface для заголовков


-валидация w3c


-классические отступы и форматирование (tab)