Верста Шаблона Для Dle

[webdiss 0]

ВСЕМ ДОБРЫЙ ДЕНЬ!!! У меня возник такой вопрос, слышал на разных сайтах верста на ДИВах, CSS и валидная верстка шаблоно для ДЛЕ, ВОПРОС: В чем разница этих версток, а какая из них считается лучше? Заранее всем спасибо

[VFK 0]

Если сравнивать табличную и блочную верстку, то блочная верстка лучше. Меньше кода, сайт грузится быстрей, код получается логичней... Блочную верстку также называют "верстка слоями", "верстка на дивах". Под CSS версткой подразумевается верстка с полным выносом всех свойств в css. По сути, она может быть, как табличная, так блочная, но, как правило, имеется в виду именно блочная.

С валидной версткой все просто - это верстка без ошибок. Если код без ошибок, он проходит валидацию.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

[n0lik 75]

Если сравнивать табличную и блочную верстку, то блочная верстка лучше. Меньше кода, сайт грузится быстрей, код получается логичней... Блочную верстку также называют "верстка слоями", "верстка на дивах". Под CSS версткой подразумевается верстка с полным выносом всех свойств в css. По сути, она может быть, как табличная, так блочная, но, как правило, имеется в виду именно блочная.

С валидной версткой все просто - это верстка без ошибок. Если код без ошибок, он проходит валидацию.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Покажите мне хоть один сайт каторый бы прошёл тест на валидность на http://validator.w3.org/

[Greeze 0]

Покажите мне хоть один сайт каторый бы прошёл тест на валидность на http://validator.w3.org/

http://greeza.net/tusa/

http://greeza.net/dietolog/

и так далее.

[n0lik 75]

W3C CSS Validator results for http://greeza.net/tusa/ (CSS level 2.1)

Sorry! We found the following errors (8)

W3C CSS Validator results for http://greeza.net/dietolog/ (CSS level 2.1)

Sorry! We found the following errors (3)

[VFK 0]

На самом деле валидность это не так сложно. Если надо что-то конкретное, то могу выделить _http://xhtml.ru/. Хотя не спорю валидных сайтов не так много. На многих крупных сайтах на верстку страшно смотреть. Но не стоит на них ровняться. Чтобы сверстать валидно, достаточно знать спецификацию.

[Greeze 0]

n0lik, ты ведь спрашивал про html валидатор

W3C CSS Validator results for http://greeza.net/tusa/ (CSS level 2.1)

Sorry! We found the following errors (8)

проверяешь на предмет валидности по css2.

попробуй так -

http://jigsaw.w3.org/css-validator/validat...g=1&lang=en

это по css3.

тогда "ошибки" две. Хотя это не ошибки вовсе а спец хаки для браузера Firefox.

64	a:focus 	Property -moz-outline-style doesn't exist : none 

67		Unknown pseudo-element or pseudo-class :-moz-selection

W3C CSS Validator results for http://greeza.net/dietolog/ (CSS level 2.1)

Sorry! We found the following errors (3)

там тоже самое, не ошибки, а хаки для ie и firefox.

[n0lik 75]

·• Greeze •·,

Я не спорю, твоя вёрстка HTML на высшем уровне, просто есть там такие ошибки каторые я ну совсем не могу понять.

[lifestar 18]

я никогда не проверяю свои сайты на валидность каким-то тестом.

Самый лучший валидатор - браузер, если в нём выглядит ОК, это означает успешный результат.

Тем более как можно что-то проверять на некое соответствие с непонятными стандартами, если нет единогласия в самом этом стандарте? Существует куча рекомендаций и всё, поэтому не забивайте себе голову всякой ерундой

[Greeze 0]

если нет единогласия в самом этом стандарте

на w3.org есть описания стандартов

[lifestar 18]

http://www.w3.org/Consortium/

Since 1994, W3C has published more than 110 such standards, called W3C Recommendations

редомендации - это значит не ОБЯЗАТЕЛЬНО к исполнению. Соответственно какие то браузеры принимают эти "стандарты", какие то нет, а кто-то переделывает по своему.

[Greeze 0]

lifestar,

все нормальные браузеры понимают стандарты w3c.

кто интересно переделывает их по своему?

Изменено 17 апреля 2008 пользователем ·• Greeze •·

[lifestar 18]

Вот простой пример:

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

[Greeze 0]

opacity это свойство из стандарта CSS3, который был объявлен сравнительно недавно. В следствии этого не все браузеры его поддерживают (ff ниже 1.6, ie5-7, safari1, и так далее).

вот эти строки

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

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

1 - для ie5-7

2 и 3 для первых версий ff и safari.

древние браузеры не знают о существовании такого css свойства и их доисторические движки не способны его обработать..

вобщем то соблюдение стандартов не должно быть самоцелью. Можно верстать обычно, как в далеком 95г. Но тогда браузеры будут отображать страницу в так называемом режиме "quirks mode".

Quirks Mode - это режим работы таких браузеров, как Internet Explorer (IE), Firefox и Opera. В принципе, Quirks Mode (также называемый режимом совместимости) означает, что относительно современный браузер преднамеренно имитирует многие ошибки в старых браузерах, в частности IE 4 и IE 5.

Цель Quirks Mode состоит в том, чтобы старые страницы показывать в современных браузерах так, как это и планировал автор (с учетом особенностей работы старых браузеров).

Нет никакой авторитетной спецификации того, что происходит при Quirks Mode.Этот режим, по сути, намеренное нарушение спецификаций HTML и CSS.

Хотя и не все браузеры показывают эти особенности, в Quirks Mode браузеры ведут себя следующим образом :

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

Размеры inline элементов реагируют на свойства ширины и высоты (хотя по CSS спецификации они должны игнорироваться)

Процентное задание высоты элемента (к примеру , <table height=”100%”> в HTML или table { height: 100% }в CSS) применяется, используя имеющуюся высоту, даже если родительский элемент имеет высоту auto (по умолчанию).

При Standards Mode, высота расчитывается от количества контента. Процентное задание высоты работает только при условии, если задана высота родительского элемента.

Переполнение блока контентом вызывает изменение его размеров. Если обьем контента не вписывается в размеры блока (заданные явно либо неявно), то свойство overflow:hidden означает, что контент будет доступен, и при этом размеры блока не будут изменяться. В случае Quirks Mode контент будет изменять размеры блока. Это можно увидеть, если блоку заданы бекграунд либо границы.

Padding для изображений игнорируется, когда он задан через CSS для элемента imgили для элемента input type=”image” .

Горизонтальный отступ для обтекаемого изображения 3 px вместо 0. Таким образом, если у img установленны атрибуты align=”left” или align=”right”, или CSS свойства float: left или float: right, то браузер ведет себя, как будто у img установлен атрибут hspace = “3″ (или margin-left и margin-right имеют значение 3px).Это применимо к IE, в остальных браузерах Quirks Mode может вызывать отступ только с одной стороны изображения, и его величина может быть 2 px вместо 3.

Вертикальное выравнивание изображения определяется относительно основания блока, а не относительно основания текста. Это происходит, когда изображение-это единственное содержимое блока. Это означает, что, например, при QuirksMode изображение в ячейке таблицы - по умолчанию у основания ячейки (что часто является предполагаемым поведением), в то время как при Standards Mode, будет промежуток в несколько пикселей (если не определить для изображения vertical-align: bottom).

Выравнивание блока по горизонтали с помощью CSS ( margin: 0 auto ) не работает.

Свойства шрифта не наследуются от body или других элементов в table. Это происходит, в частности, с font-size, но может происходить с font-family, color, и line-height.. Например, если Вы устанавливаете body { font-family: Arial }, возможно, что шрифт в ячейках таблицы останется установленным в браузере по умолчанию.

Размер шрифта для ячейки таблицы, заданный в относительных величинах, рассчитывается относительно размера шрифта, установленного в браузере, а не относительно родительского элемента для table.

Ключевые слова для установки размера шрифта рассчитываются неправильно, получается, что medium больше, чем базовый размер шрифта браузера, а small соответствует базовому размеру. Точно также все ключевые слова, xx-small, x-small, small, large, x-large, xx-large рассчитываются неправильно: каждый шаг, больше, чем должен быть.

Неправильные объявления свойств часто интерпретируются на основе догадок, так например margin: 10 интерпретируется как margin: 10px и color: ffffff как color: #ffffff. Это нарушает обязательные правила обработки ошибок в CSS: правила с синтаксически неправильными значениями должны игнорироваться.

Селекторы в CSS не зависят от регистра. Например, .foo соответствует элементу с классом class=”Foo” или class=”FOO”. Но в спецификации определена зависимость селекторов от регистра.

Допускается неправильное написание селекторов, например таких как .123a или #42.

Свойство position: fixed соответствует position: static в IE 7.

Значение свойства white-space: pre игнорируется.

Большинство CSS свойств, которые не поддерживались в IE 6, в IE 7 поддерживаются только при Standards Mode.

Парсинг Tag soup. Например, имея такой код <p>text<table>…</table>,в Firefox, при Quirks Mode, элемент p будет содержать элемент table. При Standards Mode открывающий тег table неявно закроет элемент p. IE всегда разбирает такой код неправильно.

Переносы строк могут учитываться. Например, Вы имеете список ссылок. Обычно мы пишем с переносами строк (между <li> и </li>), для более удобного чтения кода:

<ul>

<li><a ...>...</a></li>

<li><a ...>...</a></li>

...

</ul>

Однако, если Вы устанавливаете display: block и границы для элемента a, Вы можете столкнуться с вертикальными промежутками (пустыми линиями) между блоками. В IE7 это происходит при Quirks Mode, в более ранних версиях IE это происходит вне зависимости от режима работы.

Элемент form имеет по умолчанию bottom-margin равный 1em. В браузере IE такой отступ присутствует вне зависимости от режима работы.

решайте сами, как вам верстать.

лично я предпочитаю в режиме "standarts mode".

[lifestar 18]

лично я предпочитаю в режиме "standarts mode".

аналогично, тока без проверки на "валидность"

[Greeze 0]

а надо бы.

вдруг тег не закрыл или опечатку сделал.

валидатор укажет на ошибки.

[lifestar 18]

Ну вот разьве что из-за опечаток, да

[Sergio 0]

Подскажите, дивы и таблицы совместимы? А то у меня что-то в IE 7 всё съезжает влево, после вёрстки

[EzS 2]

Так существует смешанная верстка. Просто надо грамотно использовать-).

А то у меня что-то в IE 7 всё съезжает влево, после вёрстки

А то уже у вас съезжает, это от не правильного использования

[Ed85 0]

да, слоями делать сложнее, Но гораздо лучше и самому результат будет куда приятнее

по поводу стандартов - добрая чать сайтов не проходить проверку на все 100%. Она, конечно, носит рекомендательных характер и ее желательно придерживаться

[pentagon 1]

а надо бы.

вдруг тег не закрыл или опечатку сделал.

валидатор укажет на ошибки.

Вот-вот. Валидаторы - большие помощники в этом плане, очень помогают.

[dayl 0]

Насамом деле блочная вёрстка или css вёрстка открывает такие персепктивы при создании дизайна и функциональности сайта с помошью которых можно сотварить действительно что угодно, я работал в крупной компании по созданию сайтов и каждый день верстал всё новые и новые модификации дизайнов и новых фишек придуманых дизайнером, а всё из за того что я с дуру сказал что я могу сверстать что угодно и как угодно!

Раньше таблицами всё было строго прикреплено друг к другу, таблица к таблице, всё чётко, а теперь когда люди смекнули и начали всё верстать блоками тоесть div'aми (потому, что они имеют свойство dysplay:block; - отображение в виде блока) мсожно лепить что угодно, куда угодно и как угодно!!!

В добавок плюсы блочной вёрстки просто неимоверные, у меня был случай: был сайт сделаный мною, свёрстаный мною же, но он был перенасышен графикой, в общем все элемнты графики весили где-то 800 кило, + код html который весил тоже гдето 60-70 кило на страницу, в итоге когда я разобрался с блочно вёрсткой что произашлно? Я всё решил переверстать и проверить что будет...

Перенёс все параметры размеров, шрифтов, цвета, отступов и тд. в css и указал к этим элементам всё по id или class, размер страниц уменьшился до 20кило!!! а сайт был на DLE там вроде всего 15 кило весит сам текст новостей))).

Особенности css таковы что можно не делать каждый раз однои и теже параметры отображения каждый раз для каждого элемента в отдельности, стоит только указать id либо класс что гораздо компактнее чем полное описание, а также можно и не добавлять id или class во все внутренние элементы например

css:

#set1{ парметры блока}

#set1 p{параметры блока с текстом "P" в нутри блока div с id=set1}

#set1 p a {параметры ссылки в нутри блока с текстом "Р" который внутри блока div c if=set1 }

и тд...

[.code]



html:

[code]

<div id="set1">


   <p>текст  <a>ссылка внутри р</a></p>


	<a>ссылка</a>


	<ul>

	   <li>список</li>

	</ul>


	<div>новы блок и всё таже белеберда в нутри него и дальше дальше дальше...</div>


</div>

неправда удобно??? какие плюсы вы уж и сами можете догадаться) но главное компактность и размер кода, гибкого кода!!!

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

что это всё значит, почему крупные компании давно уже переходят на Блочную вёрстку?

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

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

А что для пользователей?

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

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

ну вроде так.

А насчёт валидации))

Валидация это вообще с точки кросбраузерности(многоплотформенности браузеров всех версий)

полный бред, её используют только для того чтоб следовать стандартам html и css и точно вы не сможете пройти валидацию занете почему???

Из за войны Браузеров, один не поддерживает одно, дургой отображает всё по свойму, третить ни то и не другое, да во ещё добавился google chrom это вообще не в каие рами не лезет!

Что же должен делать Вэб Мастер(верстальшик, дизайнер, програмист)?

Его задача проста для пониманию, нужно сделать так чтоб все браузеры нынешнего времени и старые начиная с windows XP могли полноценно и тютелька в тютельку отображать одно и тоже, знаете я как человек опытный могу сказать что в некоторых случаях это вообще не возможно!!! НО, у меня был один заказ назывался он Qton это сейчас он куда-то непонятно делся и вместо него висит какаято лажа =\ что мненя очень огорчает потому что вы не смождете увидеть 99% кросбраузерную страницу, которая отображается во всех браузерах просто идетнтично, несчитая 1 процента, а почему? А потому что наш любимый Internet Explorer решил выпендрица, и отображает вместе с Firefox текст внутри поля input но там 1 пиксель вниз вверх, это мало заметно если честно)

Так вот, чтоб достич 99% кросбраузерности я потратил на 17 страниц 3 месяца, каждая последующая страница была не похожа на предыдушую разве что логотипом, и задним планом.

Так вот этот сайт не прошел валидацию ни html и css, почему спросите вы?

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

Валидация сушествует только для того чтоб проверить код на ошибки!!! а так как добавлены старого рода образца кода которые видят старые браузеры это не считается ошибкой.

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

Например на данное время сушествует стандарты которые понимают все версии браузеров в css, но там нету пока что такой функции чтоб сделать из блока чёткую таблицу, там существует всего лишь обтекание, кстати при грамотно построеных параметрах обтекания какраз и создаются таблицы из блоков без использования таблиц. Но в скором будушем уже будут параметры которыми можно сделать из блока сборник таблиц, но это не скоро и врятли это смогут поддержать старые брадилки, но суть не в этом, просто некоторые элементы дизайна не возможно выполнить без таблиц, просто не возможно =( Но и грязи таблица в основном не добавляет, пожалуйста использует таблици но храните их параметры в css!

Кому интересно можете посетить мой сайт, там в скором времени какраз будет выложен тот проект и вы сами всё увидите. Dayl.ru

Если бы создатели DLE перешли бы на блочную вёрстку, то цены бы небыло этому двужку) отвечаю!

[celsoft 6 072]

Если бы создатели DLE перешли бы на блочную вёрстку, то цены бы небыло этому двужку) отвечаю!

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

[dayl 0]

celsoft ну по идеи ты прав)

но) я имел ввиду что незачем параметры странички хранить в самом html

вот посмотри на код html на вашей главной странице сайта:

<td align="right" valign="top"><img src="/templates/DLEoffsite/images/dlet_head005.gif" width="592" height="85" alt="" /></td>

я не гворю уже про картинки которые попусту можно пихать например так:

html:

<td class="r t dlet_head005"></td>


css:

.r{ text-align: right;}

.t{vertical-align:top;}

.dlet_head005{ background: url(/templates/DLEoffsite/images/dlet_head005.gif) top left no-repeat; width:592px; height:85px;}

вот так же будет лучше, и код компактнее можно сделать и ненадо будет писать всё в html а один раз указать в css и всё.

и таких моментов очень много...

можно указать в css все параметры но вы там намутили всякой ненужно всячены, смотри align="right" valign="top" для td можно указать для всех td элементов в css причём одной строчкой! это уже уменьшит вес страницы буквально на 1/3.

<table width="100%" border="0" cellspacing="0" cellpadding="0"> также незачем всё это пихать.

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

Изменено 5 декабря 2008 пользователем dayl

[celsoft 6 072]

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

Зачем? Демо шаблон предназначен для того чтобы дать пример как работают теги скрипта, что и куда вставлять, это пример и не больше и не предназначен для установки на работающие проекты, зачем что то менять в демо примере, со своей задачей стандартные шаблоны прекрасно справляются а именно наглядно показывают как работает скрипт.