|
"быстрая" верстка
тема посвещена созданию "быстрой" верстки...
термин "быстрая" подразумевает быструю загрузку и парсинг страницы! по своей работе я постоянно сталкиваюсь с проблемой оптимизации верстки! мой опыт показал что что даже если вылизать все, но при этом будет кривая верстка все равно страницы будут открываться медленно! и не важно насколько быстр сервер... при создании сложной верстки запрещается использовать таблицы! это связано с багом в ие: парсинг и отображение таблиц в ие работает очень медленно! если есть возможность разделить интерфейсы и верстку для IE и всех остальных... то это желательно сделать... из-за особенностей эксплорера! в шаблонах для эксплорера нужно использовать так можно больше фильтров в место картинок... иначе страница будет медленно отображаться! кстати вот не плохой сайт со списком и примерами фильтров IE. |
Vlad Drakula То есть что, делать 2-3 варианта страницы? А сколько потом возни с переделыванием... неее, я делаю одну верстку, по возможности, универсальную, а фишечки можно через Java реализовать, ИМХО
|
dmitryst
Цитата:
2) для каждого броузера нужно будет писать свой JS... Цитата:
Цитата:
многих эти проблеммы вообще не каснутся... веть не все верстают AJAX клиентов... в большенстве случаем можно обойтись и универсальной версткой, но к сожалению не во всех :( |
ссылка на хороший ресурс с полезными ссылками по теме векторной графики в HTML
http://xmlhack.ru/texts/06/ajax-html...nvas-ruby.html |
еще одно замечание:
изменение Z-INDEX не приводит к перезагрузки изображений и фильтров, что позволяет сильно оптимизировать работу елементов которые должны динамически изменять свой внещний вид при действиях пользователя, например изменять отображаемую картинку. |
DIV vs TABLE. Мифы сторонников тега TABLE
Миф 1. Поддержка таблиц идентична во всех популярных браузерах. С первого взгляда может показаться, что это действительно так. И действительно, спецификация таблиц в стандарте HTML 4 достаточно удачна, и практически во всех современных браузерах она, в общем, реализована относительно одинаково. Действительно, табличная разметка надежна и предсказуема. Но, к сожалению, это лишь для общих тривиальных случаев. Как только требуется немного копнуть вглубь и провести манипуляции с шириной и высотой колонок, с бордерами, отступами и прочей атрибутикой таблиц, то становится ясно, что разные браузеры могут выводить несколько разные варианты. И более того, если копать еще глубже, то механизм отображения таблиц может даже мешать сделать то, что нужно для достижения одного и того же результата на разных браузерах. То есть, табличная верстка не спасает от необходимости уделять довольно большое количество времени на поддержку различными типами и версиями браузеров. Миф 2. Табличная верстка проще, занимает меньше времени, и поэтому дешевле. Трудно не согласиться с этим. Что может быть проще, чем объявить таблицу, задать ширину колонок, и знай себе наполняй ячейки данными. Этому легко можно научить даже школьника младших классов. Но опять-таки, это только для общих простых случаев. А что делать, если нужны вложенные таблицы? А если многократно вложенные? А если ячейки должны быть закругленными, иметь разноцветные бордюры и фон, закрывающий лишь часть ячейки таблицы? Тут уже, если пользоваться табличной версткой, придется генерировать значительное количество HTML кода, а именно, открывающих и закрывающих вложенных тегов, таких как, например <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>, <TR> и <TD>. А, как известно, чем больше кода, тем больше шансов сделать ошибку, и тем дороже приходится поддержка этого кода в будущем. А чего стоит что-нибудь добавить в такую мешанину таблиц... Часто такой код просто превращается в никому ненужный хлам, который просто выкидывается при очередном редизайне сайта. Кстати, чтобы овладеть версткой с помощью CSS стилей, нужно ненамного больше знаний. Тем более что достаточно в этом разобраться только один раз, а потом копировать полученное первый раз шаблонное решение из проекта в проект. Миф 3. Отрисовка таблиц браузером происходит быстрее, чем DIV со стилями. Возможно это и так насчет отрисовки (хотя не факт). Но для интерактивной системы, которой является браузер, вряд ли имеют значения микросекунды. То есть, можно сказать, что это неважно для современных компьютеров. Но у таблиц есть не очень приятная особенность. Пока таблица не загрузится полностью, ее содержимое не отображается. Это происходит потому, что браузеру необходимо вычислить высоту и ширину ячеек таблиц, что часто невозможно сделать, не зная содержимого. Даже стиль table-layout: fixed не всегда помогает ускорять загрузку. То есть, тут уже влияет не скорость отрисовки, а скорость загрузки, которая потенциально может иногда быть очень низкой. Это уже серьезно. Иными словами, таблицы не подходят для вывода контента с большим объемом информации, так как пользователи на низкоскоростных соединениях будут ждать загрузки неприемлемо долго. Миф 4. Использование стилей не дает выигрыша по трафику. Расчет очень прост. Если взять некую среднестатистическую гипотетическую HTML страницу, сверстанную с помощью таблиц, и взять такую же страницу, сверстанную с помощью каскадных таблиц стилей, можно заметить, что объем в байтах первого варианта не сильно отличается от второго, если ко второму прибавить размер таблицы стилей. И действительно, если все страницы сайта небольшого размера, и если они значительно отличаются одна от другой по структуре и стилям, и если на клиенте выключено кэширование, то в этом случае сторонники табличной верстки правы. Но только в этом случае. Не будем забывать, что при большом размере страницы пойдет прямой выигрыш от использования более компактных тегов. И если страницы однотипны, то на всех них используются одни и те же файлы стилей. И благодаря кэшированию браузера клиента (часто также и прокси) эти файлы стилей грузятся довольно редко, обычно лишь при первом обращении к ним. Поэтому на среднестатистическом сайте выигрыш по трафику обычно получается довольно значительный именно при использовании каскадных таблиц стилей, которые пришли на смену табличной верстке. Миф 5. Таблицы не влияют на индексирование сайтов поисковиками. Все-таки влияют, причем отрицательным образом. Происходит это из-за более низкого отношения выводимого текстового контента к количеству тегов разметки, информация получается более раздробленной, парсеру поискового робота труднее раскопать полезную информацию в дебрях вложенных табличных тегов, особенно если туда вкралась ошибка. Например, специалисты по SEO скажут, что допустим портал на базе PHPNuke раскручивать несколько сложнее, чем на Xaraya. Именно по этой причине. Теперь обобщим. Это были основные мифы о преимуществах таблиц, которые в ходу у сторонников табличной верстки, и которые используются против сторонников использования стилей. Но реальность их не подтверждает, тем более что нельзя забывать о прямых недостатках использования таблиц. Автор лично для себя пришел к выводу, что универсальной стратегии для верстальщика нет, и нужно каждый раз выбирать свою методику решения для каждого проекта, в зависимости от изначальных требования заказчика. Если таких требований у заказчика на момент старта проекта нет, то нужно исполнителю самому сформулировать эти требования, и дать заказчику «на подпись», иначе потенциально возможен риск – бесплатная переделка кода, точнее не бесплатная, а за счет исполнителя. Например, для верстальщика было бы ошибкой не оговорить четкий перечень браузеров и их версий, не определить должна ли быть зависимость от разрешения экрана потенциальных пользователей, не предусмотреть внешний вид страниц при отключенной на браузере клиента графике и JavaScript, и так далее. Если с версиями браузеров порядок, и требования заказчика позволяют использовать каскадные таблицы стилей для верстки HTML страниц, то автор склоняется к тому, чтобы использовать именно это решение со стилями. Это идеологически более правильно, плюс дань прогрессу который движется именно этим путем. Хотя, если нужно сделать нечто примитивное, плюс жадный заказчик экономит на верстке, то автор все-таки вспоминает про таблицы... Выводы. На самом деле не все так просто, в данной статье не описаны недостатки верстки с использованием таблиц стилей, об этом будет другая статья. Но недостатки использования табличной верстки заставляют задуматься. Совет автора – если вы не использовали в своей работе технологию TABLELESS (верстка без использования HTML таблиц, только с помощью каскадных таблиц стилей), то попробуйте, хотя, возможно и придется потратить несколько часов на поиск материалов и хороших примеров. В любом случае, этот опыт будет давать пищу для размышлений при старте каждого нового проекта, и поможет выбирать более правильные решения. взято здесь: http://www.west3co.com/articles/data/ic_articles/2/ еще одна интересная статья: http://www.west3co.com/articles/data/ic_articles/1/ |
Интересно, а как можно без таблицы отрисовать нечто что-то с ячейками? К примеру бестабличная таблица с ценами ;)
|
benya
а вот можно... иногда сложно иногда не очень... но можно... конечно полностью всю функциональность таблиц не повторить... но большую часть можно... если очень интересно могу описать как можно верстать подобные вещи... главное пример конкретный придумай... |
Vlad Drakula,
Простой (для таблицы) пример "таблица с ценами": Код:
<table width="100%" border="0" cellpadding="2" cellspacing="1" style="BACKGROUND-COLOR: #cccccc"> |
benya
постепенно... для начала самое простое... строка с танными... было: HTML код:
HTML код:
<div style="width:100%;position:relative;height:20px;background-color: #fefefe"> |
Vlad Drakula,
Ну и оно все сбилось в одну большую кучу. Что X/Y попиксельно выставлять? А как рамку поставить? |
benya
скажу честно, то что я написал, не проверял, писал по памяти, вроде должно работать... Цитата:
Цитата:
|
Vlad Drakula,
Наверное много платят ;)) Можно так и пол года ковыряться. ;) Да ну, по мойму дурная затея...может для простого дизайна и годится. |
benya
как разтаки... сложный дизайн на таблицах не сделаещь(действительно сложный)... иначе IE просто повиснет... |
Vlad Drakula,
Цитата:
Цитата:
|
benya
Цитата:
Цитата:
|
Vlad Drakula,
Ну ок сделали мы так... Что будет если в один из элементов (внутренних ячеек) добавить: Код:
<br><br><br><br>end |
benya
или если возможна такая ситуация, то одну из ячеек можно сделать без обсолютного позиционирования, тогда будет растягиваться вся строка... или использовать "overflow:hidden;" чтобы скрывать не влезающий текст. |
Vlad Drakula,
Ты вообще какой-то код неправильный дал. Вот что у меня получилось: Код:
<style type="text/css"> |
benya
мой код был расчитан на баги IE с рачетом относительныз размеров... так должны появиться несколько строк: HTML код:
кстати на форуме есть тег [ HTML ] |
Vlad Drakula,
Взять все в одну большую рамку, а ячейки в свои рамки, наподобие клеток, как? Что-то типа там добавить BORDER-LEFT, а в следующей BORDER-RIGHT или как? |
benya
попробуй поставить "border: ****", делает границу по периметру всего блока. |
Vlad Drakula,
А как эта граница будет соседствовать с соседними блоками?? Линия двойная будет. А мне нужны одинарные линии. см. кусок html который я дал для примера выше. |
benya
у ячеек елаем границу с верху и с лева. у всей конструкции границу с низу и с права... получается одинарная граница... |
Цитата:
|
XCodeR
Цитата:
|
Vlad Drakula
.... проглядел...... |
Vlad Drakula,
Странно, до такого не додумывался :sorry: Замечательно. |
Vlad Drakula
Цитата:
Табличные данные надо верстать таблицами и только таблицами (прописав им нормальные стили). При вёрстке всего остального, разумеется, надо использовать слои с соотвествующими css (но только не через style, а нормально классы прописав). Уже классический пример css-вёрстки: http://www.csszengarden.com/ HTML-код очень прост, при этом за счёт разных CSS получаются сотни _абсолютно_ разных (т.е. включая расположение элементов) дизайнов. |
benya ;)
ivank Цитата:
|
Vlad Drakula
Ещё раз просьба перечитать данную мной ссылку. Как раз случай когда таблица не ведёт себя не как ожидается. И ещё мне трудно представить в каких случаях в вебе нужны большие таблицы. Настолько большие, что рендеринг начинает тормозить. Хотя я вебдевом не занимаюсь, так что может такие и случаи есть (если можно, то приведи примеры). |
ivank
Цитата:
|
ivank
вопрос зачастую не в размере таблиц а в их вложенности... к примеру: http://forum.oszone.net/thread-62043.html Цитата:
|
хочется от метить что я перешол на блочную верстку не из-за того что это модно или красиво... а по тому что в IE таблицы тормозят...
|
| Время: 03:54. |
Время: 03:54.
© OSzone.net 2001-