LINUX.ORG.RU
решено Форум — Web-development  

Как сейчас модно верстать?

 ,


1

1

Хочу сделать простенький дизайн с вёрсткой в три колонки.
Встаёт вопрос: а как сейчас это принято делать? Таблицы? div'ы? Или какой-то сверхновый HTML5-тэг?
На htmlbook.ru лежит такой простой шаблон. Но сдаётся мне, что он уже устарел. А я хочу сделать всё по сверхновым стандартам.

★★★★★

 ← 1 2 →

HTML5 добавляет кучу новых полезных расширений (одни audio, video чего стоят), но я продолжаю верстать на div'ах, а всякими <aside>, <nav> и прочими новыми тегами, которые вроде как для этих целей созданы, не пользуюсь.

div'ы были, есть и будут. верстай на них и не парься.

Spoofing ★★★★★
()
Ответ на: комментарий от CYB3R

Без CSS работать не будет. Те же самые div, только назвали эти теги по-другому.

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

<div style="float:left;width:27%">menu</div>
<div style="float:left;position:relative;width:72%">content</div>
дописать самому верхушку и низ не составит труда.

HTML5 теги созданные для верстки, как уже сказал, не нужны.

Spoofing ★★★★★
()
Ответ на: комментарий от CYB3R

Доктайп?

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

Kalashnikov ★★★
()

Ну друпалеры например, предпочитают div`ную верстку. А можно ли это считать модой - я не знаю.

lorovec
()

Сейчас модно так, чтобы везде работало. Инфа 146%.

VirRaa ★★★
()
Ответ на: комментарий от vvnab

удваиваю этого господина, верстать уже не модно

anonymous
()

Не парься, сделай по-нормальному, т.е., таблицами. CSS отлично подходит для раскрашивания; в области layout-а CSS сосёт.

Miguel ★★★★★
()

Обычно используют и дивы и таблицы вместе. В зависимость от задачи и здравого смысла. Главное, что бы работало везде и так как тебе нужно.

TDrive ★★★★★
()

div'ы?

Вместо них section.

Кстати, я свою хоумпагу пытался переделать под хтмл5, но так до ума дело и не довёл. Если интересно, можешь посмотреть.

Debasher ★★★★★
()
Ответ на: комментарий от CYB3R

Тут недавно вообще сайты без js обсуждали. Так, что веб технологии вне времени. Они или нужны/удобны или не нужны/не удобны.

TDrive ★★★★★
()

HTML5

Закопать.

div'ы

Только в разумных пределах.

Фиксированная ширина

100500 раз закопать вглубь за 9000 километров!

moscwich ★
()
Ответ на: комментарий от jessey

сделай по-нормальному
таблицами

/0

Да нормально всё, разумное совместное использование таблиц и div-ов отлично работает. Даже яндекс и гугл так делают.

SOmni ★★
()
Ответ на: комментарий от moscwich

div'ы

Только в разумных пределах.

Моя главная проблема. Я сделал всё на дивах, совсем-совсем всё. Мой сайт может быть иллюстрацией к шаблону Хованского: «Любить как я люблю DIV'ы».
Боюсь ЛОР-эффекта, но всё же дам линк. Пока это статичный одностраничник.

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от CYB3R

По ссылке стыд и ужас.

Я сделал всё на дивах, совсем-совсем всё.

В принципе, быдло всякое на фрилансах (ну, что среди работодателей ;) это скорее ценит.

moscwich ★
()
Ответ на: комментарий от moscwich

Можно объективной критики? Кроме цветовой гаммы. Всё сделал ярким, чтобы отличать, где какой элемент.

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от CYB3R

Заголовок без padding-ов - это уже epic fail.
А вообще у меня мозги уже плывут, так что я сейчас в толксах, завтра сделаю тебе рецензию ;)

moscwich ★
()
Ответ на: комментарий от CYB3R

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

За чёрный на тёмном можно ограничиться легким.

aedeph_ ★★
()

Хочу сделать простенький дизайн с вёрсткой в три колонки.
А я хочу сделать всё по сверхновым стандартам.

Бери за основу верстку на основе тегов div, только вместо этих самых div'ов используй теги aside, nav, header, footer, section. Они отличаются от div'a только смысловой нагрузкой, но действуют аналогично div'у. Если использовать данные «новомодные» теги без таблиц стилей, то блоки выстроятся на странице полосками сверху вниз. Соответственно, как тебе уже говорили, без CSS данные теги бесполезны.

Основная мысль такая:
----------------------------------------------------------------------
раньше для двухколоночной верстки в HTML4 и XHTML писали такую таблицу стилей: 

div#header { background-image: url(...) }

div#nav
{
width: 200px;
float: left;
}

div#section { margin-left: 200px }

div#footer { clear: both }
и такие теги: 
...
<body>
  <div id="header">Шапка-ушанка</div>
  <div id="nav">Меню сайта</div>
  <div id="section">Контент, основное содержимое сайта</div>
  <div id="footer">Подвал-овощехранилище, ололо</div>
</body>
...
-------------------------------------------
теперь для двухколоночной верстки в HTML5 пишем такие стили: 
header { background-image: url(...) }

nav
{
width: 200px;
float: left;
}

section { margin-left: 200px }

footer { clear: both }
и такие теги: 
<!doctype html>
<html>

  <head>
    <title>Моднявая верстка</title>
  </head>

  <body>
    <header>Шапка-ушанка</header>
    <nav>Меню сайта</nav>
    <section>Контент, основное содержимое сайта</section>
    <footer>Подвал-овощехранилище, ололо</footer>
  </body>

</html>

Deleted
()
Ответ на: комментарий от CYB3R

Для твоего сайта больше подойдет The Holy Grail Layout, он выгоднее для SEO, т.к. основной контент по коду будет расположен выше, чем сайдбары.

Boba_Fett ★
()
Ответ на: комментарий от aedeph_

CSS для менюшек я нагло спёр с сайта с шаблонами.

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от quantum-troll

Легко, но не кошеrно. По-моему, по современным правилам таблицы надо использовать только для табличных данных. Для вёрстки есть div'ы (которыми я всё и сделал) и современные HTML5-аналоги.

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от CYB3R

Звучит здорово, но следовало бы тогда создать вменяемые средства разметки вместо того HTML/CSS, что мы имеем сейчас.

quantum-troll ★★★★★
()
Ответ на: комментарий от quantum-troll

Таблицами верстать легко и приятно.

  1. сайт на таблицах тяжеловеснее (в kB)
  2. сайт на таблицах рендерится движком браузера дольше
  3. сайт на таблицах не позволяет кардинально менять дизайн без переверстывания html-шаблона, в отличие от известного примера
  4. сайт на таблицах семантически некорректен
  5. сайт на таблицах не позволяет расположить основной контент в html-коде выше, чем сопутствующий (в отличие от), отчего страдает SEO
  6. сайт на таблицах сводит с ума программы (такие как сринридеры и т.п.) для людей с ограниченными возможностями, отчего значительно страдает доступность сайта (http://en.wikipedia.org/wiki/Web_accessibility]Web accessibility)

Я не спорю, что иногда приходится использовать табличную верстку, но даже тогда можно использовать правильное решение на css-tables.

Таблицами верстать легко и приятно

И что? Строителям-таджикам заплатить дешевле, чем профессионалам, однако такая дешевизна аукнется.

Вывод: не будь «веб-таджиком», будь веб-профессионалом, используй свои инструменты правильно, $#@*#^.

Boba_Fett ★
()
Ответ на: комментарий от quantum-troll

Звучит здорово, но следовало бы тогда создать вменяемые средства разметки вместо того HTML/CSS, что мы имеем сейчас.

Вот когда (если?) создадут вменяемые средства разметки и стилизации, тогда и будем их использовать, а пока - то, что есть.

И да это не отменяет того факта, что html-таблицы используются в 99.99% случаев не к месту, и можно без напряга использовать более подходящее средство.

Boba_Fett ★
()
Ответ на: комментарий от quantum-troll

Веб-технологии клиентской стороны — просто обитель уродливых, но обратно-совместимых стандартов.

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

Boba_Fett ★
()
Ответ на: комментарий от Boba_Fett

Естественному языку такое позволить можно (не языку программирования!), а вот такие технологии это просто стыдно.

quantum-troll ★★★★★
()
Ответ на: комментарий от quantum-troll

не языку программирования!

Ну, вспоминаем, что HTML - не язык программирования, а всего лишь язык разметки.

Мне тоже крайне не нравится то, месиво, которым является современный HTML/CSS: мне не нравится, что вместо продуманной структуры в HTML5 запихивают огромное количество тегов сомнительной надобности (которые не поддерживаются большим количеством до сих пор используемых браузеров); мне не нравится избыточность CSS и я не понимаю, почему его нельзя было сделать похожим на LESS/SCSS. В мироздании есть огромное количество вещей, глядя на которые я вопрошаю: «ну, почему?!»

Однако, все это не мешает мне использовать в веб-разработке то, что есть и делать это правильным образом.

Boba_Fett ★
()
Ответ на: комментарий от Boba_Fett

Мне тоже крайне не нравится то, месиво, которым является современный HTML/CSS

Мне больше всего не нравятся префиксы в CSS. 

    -o- — префикс для браузера Опера
    -moz- — префикс для браузеров из семейства Mozilla
    -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
    -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
    -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
    -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror
Почему придумавшему до сих пор руки не оторвали?

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от CYB3R

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

Deleted
()
Ответ на: комментарий от Deleted

Хорошо, с цветами ещё поиграюсь.

CYB3R ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
 ← 1 2 →
Web-development