Новая тема   Ответить

 igorr
Synchro, раз пошел разговор о верстке, кину и я свои 5 коп.

На данный момент есть три основных стиля верстки:

1. Основан на HTML 3.2 - языке визуальной верстки страниц. Применяется с незапямятных времен, структура чаще всего описывается табличными тегами (table, tr, td, th...).
Пример:
Код:

2. Так называемая "дивная" (от названия тега div) верстка. Вид документа описывается каскадными таблицами стилей, код стуктурируется в контейнерах div, span.
Пример:
Код:

3. Структурная верстка. Отличается от "дивной" правильной семантикой документа, то есть абзацы - это p, списки - это ul, ol, li. Оформление полностью выведено из документа и описывается таблицами стилей (css, xslt...). Отличительная особенность - корректно отображается в любом устройстве (монитор, мобильник, наладонник...).
Пример:
Код:

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

Последний раз редактировалось: igorr (28/03/06 в 20:55), всего редактировалось 1 раз

 Lenma
1) при правильной верстке все три способа корректно отобразятся на любом дисплее.

2) Цитата:
- это сказал хозяин гугла ?
примеры приведенные Synchro , подрывают ваш авторитет как хозяина гугла.

 pierx
Последний способ позволяет начинать отображать контент сразу даже ИЕ, не дожидаясь полной загрузки документа, а это плюс.

Кстати, хороший ресурс, посвященный верстке 3 способом, никото не порекомендует? На русском желательнее...

2 Lenma - ты почти права - но бывают моменты, когда приходится столько таблиц накручивать, что страшно становится (я про табличную верстку). Причем 100% корректность - хз - я верстал правильно, но браузеры все понимают по-разному. Примеры искать не буду, но обычно стоит посмотреть сложную верстку каким-нибудь древним браузером

 igorr
Lenma, при табличной верстке, на экране мобильника будет горизонтальная прокрутка в 5 экранов, а при 2 и 3-й верстке - вертикальная колбаса, причем в 3-м случае она будет смотреться более понятно.

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

 Lenma
Облазила топы выдач по куче высокочастотных запросов.
итак :

1) 95% пользуют комбинированые верстки, причем львинная доля в разметке страниц юзает таблицы.

2) предполагаю что гугле-бот ходит не с мобильника.

3)ненадо очеловечивать броузеры и боты. А для "колбасных" преференций подскажу про процентное выражение размеров таблицы.(Вы хотели "колбасы" ? - будет вам "колбаса").


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

 pierx
Lenma писал: В табличной верстке под % ширины будет присутствовать вся структура, как ты ее описала. Если же ширины не хватит при верстке с css, если ширины не хватит, то правую часть таблицы он расположит ниже, если я правильно понимаю - и колбаса будет иной

Могу и ошибаться, но видел такое частенько в браузерах

 CHILI MEDIA
Ширину элемента в цсс можно задавать в %.
Проблем нет.

 Lenma
для pierx специально :

Для знатоков "колбас" ... 100% - это полная ширина экрана будет , а вот ячейки будут как ты их задашь.

для CHILI MEDIA : "а у нас в квартире газ".

to all: господа , давайте посерьезней аргументировать свои заявления.

 Synchro
Раз топик с меня начался, то и я высскажусь. В плане позиционирования в СЕ способ верстки имхо не играет ключевого значения. Могу предположить, что использование css даст какой-либо бонус при ранжировании. Но имхо если такое и есть, то вес этого бонуса при анализе рейтинга гуглом весьма и весьма низок. Грамотное задание тех же титлов и десков у страниц будет иметь в разы (если не в десятки) больший вес для гугла, нежели чем отличия в верстке.

По визуальному отображению. Используя табличную верстку можно добиться корректного отображения во всех типах браузеров. Если руки откуда нужно растут.

// 2igorr: Верстать div'ами - это, имхо, BDSM какой-то.

 Вацлав
Уважаемые коллеги.
К сожалению не нашел точного урла у себя в закладках, но позволю себе отправить Вас на поиск нужной инфы на официальные блоги гугла. Там неоднократно высказывалось, что гугл любит хорошо структурированные документы и не очень любит многократно вложенные таблицы. Кроме того это существенно увеличивает код и обременяет Вас дополнительными расходами на траффик.
Использование грамотной CSS верстки, позволяет творить порой чудеса Например поставив вверх документа наиболее важную информацию для бота (ключевики, дески итп), а ниже запихнуть всякий мусор. А отобразить на экране с точностью до наоборот. Т.е. баннеры и кнопки кликхире вверх, а тексты вниз (а то и вовсе их спрятать теми же манипуляциями с CSS)

 kit
Вацлав писал:
Вот это на мой взгляд очень важно. Вообще, довольно сложно сверстать сложный сайт на CSS и чтобы это работало в основных браузерах. Мы на PornInspector.com сейчас готовим перевёрстку, и там мозг закипает.

 Skat
Вот структура сайтов на вордпресс к примеру построено без использования таблиц в явном виде (т.е. их нет в коде).

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

 Intalex
Вацлав писал:

Истину глаголишь

http://www.csszengarden.com/

http://www.mezzoblue.com/zengarden/alldesigns/

И насчёт 2 и 3 способа... Насколько я понял, разбирая сайты на цсс, то все они были сделаны с использованием комбинации этих двух методов. Т.о. повышается гибкость в оформлении и управлении контентом.

 Synchro
По поводу объема страниц согласен категорически. CSS помогает чрезвычайно уменьшить вес кода. Еще плюс - у таблиц есть такая херь по дефолту, что пока не прогрузицца и не выполницца js в теле таблицы, то она не отображаецца. Я как-то из-за того, что я в верхний блок тумб на сидже (таблица) засунул код aff на js, то чуть сидж на 100к не положил. Сдул его за сутки ровно в 2 раза. Потому что эти сутки сервак aff'а полулежал и отдавал геобанеры с охрененной задержкой. Потом я узнал, что _можно_ отображать таблицу не дожидаясь выполнения скрипта. Там чо та нада где та праписать. Но я просто стал выносить все критичные по загрузке элементы за пределы основной таблицы. У css имхо такой феньки нет. Что грузицца в потоке, то и показываем и не дожидаемся загрузки остальных элементов.

Но я могу ошибацца. Если честно, то чисто в css я ни разу не верстал.

 kit
Skat писал:
Wordpress не истина в последней инстанции. Это то-же самое, как считать Ajax очередным святым граалем интернета. Блоги частенько некорректно рендерятся из-за модной вёрстки.

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

 AAK
css - сила, но ie еще нехорошо поддерживает

http://www.csszengarden.com/?cssfile=189/189.css
при скролле ноты остаются на месте, впечатляет...

 Tabaluga
AAK писал:

У меня нормально показывает все. И ноты крутятся
Обнови осла или SP какой-нить может нужен.

 Intalex
2 Tabaluga - они и должны быть на месте, так задумано имхо.

Вообще по этому сайту есть интересная книженция: The Zen of CSS Design: Visual Enlightenment for the Web. У меня есть электронный её вариант, если кому надо - говорите, залью куда-нить. Также эта же книга, по-моему, есть и на русском языке, но в бумажном виде.

Ещё в электронном варианте есть одна из лучших книг по цсс - More Eric Meyer on CSS.

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

2 Kit: Есть книженция Css Hacks And Filters - John Wiley And Sons - мож пригодится, чтобы голова не пухла и сайт был доступен для максимального кол-ва платформ и браузеров?

 kit
Да, литературы хорошей не хватает по CSS.

 Tabaluga
Intalex писал:

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

 AAK
Tabaluga писал:
я тоже...

 Spark
Intalex писал:
Вышли плиз выше перечисленные на мыло (в профиле).
И вот эту http://www.amazon.com/gp/product/0596005253/103-0683686-5272622?n=283155 если есть.
Язык не имеет значение, но желательно на русском конечно.
спасибо.

 Вацлав
kit писал:
Полагаю, что зависит от "вектора мышления". Очень трудно переучиться с табличной верстки на стилевую. Но когда эта фича освоена, становится легче самый сложный сайт сверстать именно CSS-ами. А вот с литературой на этот счет действительно сложно. В принципе я бы сравнил сложность перехода на CSS со сложность перехода с str_replace на регулярные выражения

 Intalex
Выложил следующие книги по CSS:

Css Hacks And Filters.rar (в архиве Css Hacks And Filters - John Wiley And Sons.pdf) - 4 мб

DHTML_and_CSS_Advanced.rar (в архиве Peachpit-DHTML_and_CSS_Advanced_Visual_Quickpro_Guide.PDF) - 9,5 мб

More Eric Meyer On Css.rar (в архиве New Riders - More Eric Meyer On Css [2004].chm) - 6,3 мб

Professional Css.rar (в архиве Wrox - Professional Css Cascading Style Sheets For Web Design - Schmidtt, 2005.pdf) - 8,4 мб

Spring.Into.HTML.and.CSS.rar (в архиве Addison.Wesley.Spring.Into.HTML.and.CSS.Apr.2005.chm) - 5,9 мб

Stylin with CSS.rar (в архиве New Riders - Stylin with CSS - A Designers Guide 2005.chm) - 7,9 мб

Teach.Yourself.CSS.in.10.Min.rar (в архиве Sams,.Teach.Yourself.CSS.in.10.Minutes.(2005).BBL.LotB.chm) - 3,4 мб

Teach.Yourself.HTML.and.CSS.part1.rar и Teach.Yourself.HTML.and.CSS.part2.rar (в архивах одна книга Sams.Sams.Teach.Yourself.HTML.and.CSS.in.24.Hours.7th.Edition.Dec.2005.chm) - размеры соотв. 9,5 мб и 4 мб

The.Zen.of.CSS.Design.part1.rar, The.Zen.of.CSS.Design.part2.rar и The.Zen.of.CSS.Design.part3.rar (в архивах одна книга Peachpit.Press,.The.Zen.of.CSS.Design.Visual.Enlightenment.for.the.Web.(2005).LiB.chm) - размеры соотв. 9,5 мб, 9,5 мб и 8,6 мб

Теперь, как это можно забрать. Я открыл ящик на gmail - mx.library@gmail.com (psw: xgBg6PLMQo), заходим в него, там в инбоксе лежат письма, а аттачменты к ним - все файлы, которые я тут перечислил. Возможно, способ немного геморный, но халявный и быстрый в отличие от сервисов для расшарки файлов типа рапиды и прочих, где по бесплатным аккам много ограничений.

Либо можно поступить так. Скачиваем отсюда программу Gmail Drive, устанавливаем. Заходим в Мой компьютер - там будет новый диск Gmail Drive, по нему двойной клик и для логина вводим приведённые выше логин и пасс ящика, всё, диск подключен.

 Intalex
Да и ещё... все книги на англ.