Опыт для верстальщика

Скажите, как можно приобрести опыт в табличной верстке? Ибо вроде как сверстал пару примеров, в разных браузерах выглядит одинаково, а вдруг что-то нужно делать по другому? Есть у кого возможность дать пару несложных заданий и указать на ошибки?

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

Пишите в асю - 253218. Может прейдем к общему знаменателю.

Почитай на счет верстки таблицами и блоками данную статью ссылка

Ну у меня был выбор: блочная или табличная. Прочитал с десяток подобных статей, в каждой доказывали своё. Решил начать разбор с табличной, ибо, как мне показалось, на неё болшьше спрос.

Цитата:

Ну у меня был выбор: блочная или табличная. Прочитал с десяток подобных статей, в каждой доказывали своё. Решил начать разбор с табличной, ибо, как мне показалось, на неё больше спрос.

Забейте на все.. сейчас не важно что там где доказывал.. факт в том что табличная верстка сейчас не катируеться.. она сейчас не пользуется спросом.. уже давно на веблансере небыло тендеров с требованием чтобы было сверстано таблицами) Вот только поэтому стоит начать изучение блочной верстки.

2Duck_kun

Мне ваше высказывание кажеться слегка не верным. Преимущество табличной верстке не в спросе. Это последствие преимуществ. Блочная верстка в первую очередь лучше тем что она, при грамотном подходе, позволяет разделить содержание и структуру. Тоесть каждый элемент несет определенную смысловую нагрузку. В табличной верстке создается огромное количество нагромождений. К тому же разбираться в блочной верстке намного легче чем в табличной. Я конечно не утверждаю что блочная верстка это панацея от все проблем но она позволяет экономить много времени.

Вносить изменеия в дизайн или раные коррективы в блочной лучше, никакого сравнения

Согласился со всеми. Разобираюсь с блочной. Сделал сайт табличной и блочной, по весу - разница в 4 раза . Вот только часто при верстке div'ами получаются какие-то шаманские методы.

К сожалению не любой дизайн позволяет полностью разделить содержимое и оформление хоть с дивами хоть без. Как пример графические рамки вокруг резиновых блоков - уже пора бы в css вводить нечто типа: corner-top-left-image,corner-bottom-left-image,....., border-left-image ......

По-этому я не думаю, что стоит доводить дело до фанатизма. Использовать по возможности и в большей степени блочную верстку, но и табличную там же подмешивать в разумных пределах по необходимости. И если для реализации нкоего дизайнерского изыска необходимо использовать дополнительные блоки (именно для оформления) то почему бы и не использвать таблицу? Тем более если она, например, обеспечит меньше гемороя с кроссбраузероностью..... В конце концов, что есть таблицы? ИМХО набор тех же блоков, но с некоторыми заданными правилами.

Цитата:

Как пример графические рамки вокруг резиновых блоков - уже пора бы в css вводить нечто типа: corner-top-left-image,corner-bottom-left-image,....., border-left-image ......

См. CSS3. Multiple backgrounds.
И любой верстальщик должен иметь в голове как минимум 10 способов верстки этих самых рамок с минимальными потерями для текущего проекта. Не знает - кому он такой нужен?

Цитата:

По-этому я не думаю, что стоит доводить дело до фанатизма.

Стоит. Без категоричности не будет движения вперед.

Цитата:

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

Потому что:
1. Это признание верстальщика в собственной беспомощности.
2. Как раз больше проблем с кроссбраузерностью таблица и обеспечит.
Табличная верстка допустима в случаях когда этого требуют космические сроки / бюджет проекта, когда не стоят вопросы и кроссбраузерности и дальнейшей поддержки кем либо, когда "никто не сделает лучше".

Цитата ("Sir_Michael"):

И любой верстальщик должен иметь в голове как минимум 10 способов верстки этих самых рамок с минимальными потерями для текущего проекта. Не знает - кому он такой нужен?

Да это все понятно. Тем не менее способы не позволяют полностью разделить дизайн и содержание.

Цитата ("Sir_Michael"):

Стоит. Без категоричности не будет движения вперед.

Работал с англичанами над америкосным сайтом. Там вышла какаято бумага (не знаю какого уровня) использовать только блочную верстку. На мой взгляд дошло до дебилизма. Таблицу именно таблицу по содержанию реализовали блоками да в резине. При маленьком окне бродилки таблица превращалась в полный пипец. Заморские верстальщики меньше чем наши себя утруждают использованием всех возможностей css. Да при помощи цсс можно было бы заставить эту таблицу вести себя как таблица. НО ЗАЧЕМ? Если есть специальный механизм!?
Я в основном именно такие случаи считаю фанатизмом.

Цитата ("Sir_Michael"):

1. Это признание верстальщика в собственной беспомощности.

Бред. Если только причина в то, что он не может это сделать блочной версткой.
А если это вопрос экономии времени/размера кода и тп тд?
Согласитесь в конце концов важен конечный результат - рабочая страница. Остальное (если дизайн все же лезет в содержание) хоть дивы хоть таблицы меряние кое чем.

Цитата ("Sir_Michael"):

2. Как раз больше проблем с кроссбраузерностью таблица и обеспечит..

Не согласен. Точнее не всегда это верно. Простейший пример. Шапка, три колонки (одинаковой высоты), подвал. Везде свой фон. Резина. Таблицой, практически, сделаешь не думая о кросбраузерности и все будет одинаково. Дивной, как минимум, придется определять разные для бродилок отступы колонок

Цитата ("Sir_Michael"):

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

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

voral

Цитата:

Да это все понятно. Тем не менее способы не позволяют полностью разделить дизайн и содержание.

Обоснуйте, пожалуйста. Даже всего с одним блоком существует несколько решений этих самых уголков.
Что касается принципов разделения оформления и содержания, то экстра-разметка, грамотно внесенная на этапе планирования html части файла, только улучшает макет - css zen garden (хотя и не про углы), классика.

Цитата:

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

Верю. Некомпетентность того или иного звена. А кто-нибудь из исполнителей пытался донести точку зрения о недопустимости подобного или все дружно решили делать по бумажке?

Цитата:

Заморские верстальщики меньше чем наши себя утруждают использованием всех возможностей css

Вы не с теми заморскими верстальщиками общаетесь. На западе кроме использования css, не говоря о семантике еще пекутся о соответствии рекомендациям WAI/WCAIG, что у наших "верстальщиков" вызывает лишь "а что это?".

Цитата:

А если это вопрос экономии времени/размера кода и тп тд?
Согласитесь в конце концов важен конечный результат - рабочая страница. Остальное (если дизайн все же лезет в содержание) хоть дивы хоть таблицы меряние кое чем.

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

Цитата:

Шапка, три колонки (одинаковой высоты), подвал. Везде свой фон. Резина. Таблицой, практически, сделаешь не думая о кросбраузерности и все будет одинаково. Дивной, как минимум, придется определять разные для бродилок отступы колонок

Я вообще-то говорил не о каких-то колонках. Хотя, и на примере тех же "табличных" колонок, про кроссбраузерность можно спросить - как такой сайт будет работать на экране произвольного мобильного устройства, а там еще всякие "версии для печати" и прочее, прочее. Думать - надо.

Те самые три блочных колонки - существует порядка 30 разных и вполне рабочих кроссбраузерных/кроссплатформенных решений без каких-то "разных для бродилок отступов".
Например: ссылка Неидеальный пример, конечно (мне очень не нравится способ борьбы с выпаданием float' блоков и названия классов)ю
С грамотной экстра-разметкой (три добавочных div'а) подобный html макет дает полную свободу в плане верстки и воплощения любых чудачеств дизайнера.

Цитата:

Перво на перво все зависит от дизайна

Это только в проектах до $500 и сайтах-визитках, уж извините.
Складывается мнение, что вы относитесь к тем верстальщикам, которые до сих пор уверены, что верстка - это исключительно соответствие макету дизайнера, а остальное вторично. Уже много лет это не так.

Цитата:

А бюджет тут вообще не причем - взялся за проект надо делать с полной выкладкой.

Бюджет упомянут рядом с космическими сроками.

Цитата ("Sir_Michael"):

Обоснуйте, пожалуйста. Даже всего с одним блоком существует несколько решений этих самых уголков.
Что касается принципов разделения оформления и содержания, то экстра-разметка, грамотно внесенная на этапе планирования html части файла, только улучшает макет - css zen garden (хотя и не про углы), классика.

Ну возможно я не настолько грамотный верстальщик на я не знаю как у такого блока сделать (для примера): графический фон, закругленные углы, графическая рамка, тень с двух сторон, резиновый и по ширине и по высоте

<div class="test">Это просто примечание. Здесь нет вложенных тэгов</div>

Кстати о птичках в пример тот пример (сори за тафталогию) который приведен ниже с тремя колонками

Цитата ("Sir_Michael"):

Верю. Некомпетентность того или иного звена. А кто-нибудь из исполнителей пытался донести точку зрения о недопустимости подобного или все дружно решили делать по бумажке?

Естествнно. Дизайн был предан русским программистам (в данном случае мне) :) - таблица стала таблицей. Собственно благодаря этой бумажке и я стал изучать блочную верстку тогда и мне она действительно понравилась.

Цитата ("Sir_Michael"):

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

Да я согласен с этим. Я же говорю о случаях когда в html все равно вставляются блоки лишь для дизайна. Согласитесь при редизайне все равно туда придется лезть.

Цитата ("Sir_Michael"):

Например: ссылка Неидеальный пример, конечно (мне очень не нравится способ борьбы с выпаданием float' блоков и названия классов)ю

А разве здесь нет блоков только ради дизайна?
По содержанию здесь:header, footer, col1, col2, col3. Для чего остальные блоки? Я хочу редизайна этой страницы. Пусть footer будет только под col2 между col1 и col3. Только методами css это возможно?
Существует ли в данной разметке полное разделение содержания и дизайна?


Цитата ("Sir_Michael"):

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

Я даже не думал ни когда так. Т.к. изначально и программист и мне частенько приходилось... кхм... "подправлять" верстку. Хотябы по этому.... Ну да ладно. Я не об этом я всего лишь к тому что не всякий дизайн позволяет полностью разделить........

Я с вами соглашусь на сто процентов, что блочная верстка позволят полностью разделить содержимое и дизайн если при помощи css можно будет сверстать туже страницу с тремя колонками и теми же условиями и при этом в html иметь только следующее:

<div id="header">bla bla</div>

<div id="col1">bla bla</div>

<div id="col2">bla bla</div>

<div id="col3">bla bla</div>

<div id="footer">bla bla</div>

voral
Цитата:

для примера): графический фон, закругленные углы, графическая рамка, тень с двух сторон, резиновый и по ширине и по высоте

Варианты есть разные и их много - с :before, :after, например:
ссылка - графическая часть не очень наглядна, но, думаю, принцип увидите.

Цитата:

Я же говорю о случаях когда в html все равно вставляются блоки лишь для дизайна. Согласитесь при редизайне все равно туда придется лезть.

Ну а я говорю о том, что этот процесс (вмешательство в html часть шаблона) нужно минимизировать или вообще исключить. Поэтому распространено мнение, что качество верстки и работа хорошего или плохого верстальщика познается через несколько лет работы проекта.

Минимизация тегов - не то к чему следует стремится. В хорошем семантически сверстанном макете тегов больше, чем нужно для отображения документа.

Экстра-разметка - необходимое и зачастую полезное зло. Мой любимый пример - если я верстаю сложный макет с возможными последующими правками, то меню задаю обычно так:
<div class="menu"><ul>...</ul></div>, хотя зачастую можно сверстать <ul class="menu">...</ul>.
Но вот этот лишний обертывающий div можно использовать для каких-то нужд при возможном редизайне - повесить тот же дополнительный background, например, верстальщик должен предполагать и такую возможность.

Цитата:

А разве здесь нет блоков только ради дизайна?
По содержанию здесь:header, footer, col1, col2, col3. Для чего остальные блоки? Я хочу редизайна этой страницы. Пусть footer будет только под col2 между col1 и col3. Только методами css это возможно?
Существует ли в данной разметке полное разделение содержания и дизайна?

Ради дизайна как такового - нет. Ради кроссбраузерности - да.
Ради возможности редизайна средствами только css - да! Переместить footer под col2 - да! В том и прелесть. А если в html макете будет табличный layout - вы так сможете?
Также некоторые достаточно именитые разработчики также практикуют менять DOM "на лету" javascript'ом (к такому подходу отношусь с подозрением, предпочитая оставлять js часть программистам).

Не отрицайте экстра-разметку

А не страдаете ли вы Сир Майкл излишним фанатизмом?
Коссбраузерно, валидность, минимум претензий программистов - все что нужно.

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

Цитата:

И любой верстальщик должен иметь в голове как минимум 10 способов верстки этих самых рамок с минимальными потерями для текущего проекта. Не знает - кому он такой нужен?

Пойду утоплюсь в Енисее

Цитата ("Sir_Michael"):

voral
Цитата:

для примера): графический фон, закругленные углы, графическая рамка, тень с двух сторон, резиновый и по ширине и по высоте

Варианты есть разные и их много - с :before, :after, например:
ссылка - графическая часть не очень наглядна, но, думаю, принцип увидите.

В IE6 второй пример расползается.

Sir_Michael, а не могли бы вы привести ещё пару ссылок на примеры или статьи на тему верстки подобных вариантов Цитата:

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

наиболее правильные с вашей точки зрения.

Цитата ("Sir_Michael"):

Минимизация тегов - не то к чему следует стремится. В хорошем семантически сверстанном макете тегов больше, чем нужно для отображения документа.

Экстра-разметка - необходимое и зачастую полезное зло. Мой любимый пример - если я верстаю сложный макет с возможными последующими правками, то меню задаю обычно так:
<div class="menu"><ul>...</ul></div>, хотя зачастую можно сверстать <ul class="menu">...</ul>.
Но вот этот лишний обертывающий div можно использовать для каких-то нужд при возможном редизайне - повесить тот же дополнительный background, например, верстальщик должен предполагать и такую возможность.

Цитата:

А разве здесь нет блоков только ради дизайна?
По содержанию здесь:header, footer, col1, col2, col3. Для чего остальные блоки? Я хочу редизайна этой страницы. Пусть footer будет только под col2 между col1 и col3. Только методами css это возможно?
Существует ли в данной разметке полное разделение содержания и дизайна?

Ради дизайна как такового - нет. Ради кроссбраузерности - да.
Ради возможности редизайна средствами только css - да! Переместить footer под col2 - да! В том и прелесть. А если в html макете будет табличный layout - вы так сможете?
Также некоторые достаточно именитые разработчики также практикуют менять DOM "на лету" javascript'ом (к такому подходу отношусь с подозрением, предпочитая оставлять js часть программистам).

Не отрицайте экстра-разметку

Интересно, насчёт экстра разметки. Действительно стремился максимально минимизировать количество тегов. Теперь буду иметь ввиду необходимость дополнительных обёртывающих блоков для некоторых элементов.
Возникло ещё несколько вопросов:
1.Всё таки, правильно ли задавать графический header в виде

<h1 class="header">Название сайта<span></span></h1>

или, всё таки лучше

<div class="header"><span></span></h1>

?
2.Какая структура заголовков правильней:

<h1></h1>

<h2></h2>

....

<h1></h1>

...

<h2></h2>

...

<h3></h3>

...

<h3></h3>

...

<h1></h1>

...

<h2></h2>

...

<h3></h3>

...

<h3></h3>

или

<h1></h1>

<h2></h2>

....

<h2></h2>

...

<h2></h2>

...

<h3></h3>

...

<h3></h3>

...

<h2></h2>

...

<h2></h2>

...

<h3></h3>

...

<h3></h3>

3.Насчёт выноса контентной части для оптимизации в начало страницы:
можно ли обойтись без абсолютного позиционирования или нет?
Если это возможно, то не могли бы вы привести ссылку на способ или название метода, чтобы я смог его найти?

Цитата ("Sir_Michael"):

Варианты есть разные и их много - с :before, :after, например:
ссылка - графическая часть не очень наглядна, но, думаю, принцип увидите.

Убил.

Цитата ("Sir_Michael"):

Ну а я говорю о том, что этот процесс (вмешательство в html часть шаблона) нужно минимизировать или вообще исключить. Поэтому распространено мнение, что качество верстки и работа хорошего или плохого верстальщика познается через несколько лет работы проекта.

С этим согласен.

Цитата ("Sir_Michael"):

Экстра-разметка - необходимое и зачастую полезное зло. Мой любимый пример - если я верстаю сложный макет с возможными последующими правками, то меню задаю обычно так:
<div class="menu"><ul>...</ul></div>, хотя зачастую можно сверстать <ul class="menu">...</ul>.
Но вот этот лишний обертывающий div можно использовать для каких-то нужд при возможном редизайне - повесить тот же дополнительный background, например, верстальщик должен предполагать и такую возможность.

Ну это я не считаю элементом дизайна (блок в прмере с меню): блок class="menu" - определяет границы блока, <ul> и все остальное это содержимое. Но это ИМХО

Цитата ("Sir_Michael"):

Ради дизайна как такового - нет. Ради кроссбраузерности - да.

Ну это скорее ближе к дизайну чем к содержанию......

Цитата ("Sir_Michael"):

Переместить footer под col2 - да! В том и прелесть.

Каким образом кроме js? Хотя...... Игрой с margin-ами? Хм. Надо поробовать..... На вскидку вижу только если футер имеею фиксированную высоту, а крайние колонки фиксированую ширину.

Цитата ("Sir_Michael"):

А если в html макете будет табличный layout - вы так сможете?

Только лезть в html

Цитата ("Sir_Michael"):

Также некоторые достаточно именитые разработчики также практикуют менять DOM "на лету" javascript'ом (к такому подходу отношусь с подозрением, предпочитая оставлять js часть программистам).

ИМХО использовать js надо только в крайних случаях.

Ой, сколько вас

Myaut
Цитата:

А не страдаете ли вы Сир Майкл излишним фанатизмом?
Коссбраузерно, валидность, минимум претензий программистов - все что нужно.

В 90% проектах публикуемых здесь проектах действительно не нужно.
Но если вы сунетесь с подобным подходом в любой серьезный проект, вас просто высмеют.

antonius1980
Цитата:

В IE6 второй пример расползается.

Не вижу, да и не важно - подойдет любой другой пример того же метода.

Цитата:

Sir_Michael, а не могли бы вы привести ещё пару ссылок на примеры или статьи на тему верстки подобных вариантов

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

Цитата:

Теперь буду иметь ввиду необходимость дополнительных обёртывающих блоков для некоторых элементов.

Все же не принимайте все мои слова за аксиому, это лишь мой подход, основанный на практике. Ко всему лучше дойти самостоятельно. Настоящие фанатики семантической верстки могут затоптать ногами за экстра-разметку

Цитата:

1.Всё таки, правильно ли задавать графический header в виде

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

Цитата:

2.Какая структура заголовков правильней:

Вопрос крайне спорный, по моему скромному мнению - вторая.

Цитата:

3.Насчёт выноса контентной части для оптимизации в начало страницы:
можно ли обойтись без абсолютного позиционирования или нет?

Не совсем понял вопрос. Выше я давал ссылку на трехколоночный layout - там нет абсолютного позиционирования.

voral
Цитата:

Каким образом кроме js? Хотя...... Игрой с margin-ами? Хм. Надо поробовать..... На вскидку вижу только если футер имеею фиксированную высоту, а крайние колонки фиксированую ширину.

Я так понимаю все таки футер нужен не под col2, а под col1 (большая колонка) - как и говорил, порядок следования в макете таков, что центральная колонка идет первой. Ну и именование классов layout'а тоже критиковал выше.
Ну да, первое что приходит в голову - margin'ами. Задать footer'у position:relative, отрицательный отступ вверх, нужные margin'ы по бокам и высоту лучше в em'ах, ну и стоит поправить padding снизу у контентной части. А если мысль как сделать приходит в голову еще до разбирательства с макетом - это уже хорошо.

Умные речи... Только отвлеченные.
Скажите, а когданить предполагается превратить веб програмирование (включая верстку) в нечто прогнозируемое, когда делая- ты знаешь что получишь в результате?

Sinarionn
Простите?