Jump to content
  • 0

Правильно ли сделать сайт на одних div'ах?


Омск
 Share

Question

Собрался делать сайт, с такой структурой:

9f52ad1a6a98t.jpg

Шапку и блок с основной информацией хочу сделать в виде Divов, не знаю только как будет правильно сделать меню.

Его лучше сделать обычным html-меню или тоже блоком?

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

Link to comment
Share on other sites

Recommended Posts

  • 0
Правильно ли сделать сайт на одних div'ах?

 

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

Link to comment
Share on other sites

  • 0

Текст я собираюсь делать внутри блоков.

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

 

Вот такой версткой делать сайт стоит?

Link to comment
Share on other sites

  • 0

Я считаю, что в том чтобы сделать сайт на одних дивах нет ничего плохого. Например так же как сделать сайт на одних таблицах. Если при этом он будет выполнять свою функцию, то почему нет? Однако вам нужно понимать, что в настоящий момент такие поисковики как Google и Яндекс всё больше внимания уделяют семантике вёрстки. По этой причине. при прочих равных, сайт, сделанный на одних дивах. будет в поисковой выдаче ниже чем сайт, использующий все возможности HTML5.

 

А так, в принципе можно зафигачить и на одних дивах, ежели заказчик не против.

  • Like 1
Link to comment
Share on other sites

  • 0

В данном случае заказчику все равно как будет сделан сайт.

Почему сайт из блоков будет ниже?

При построении сайта на блоках тоже ведь можно изпользовать все возможности Html5?

Link to comment
Share on other sites

  • 0
Почему сайт из блоков будет ниже?

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

 

При построении сайта на блоках тоже ведь можно изпользовать все возможности Html5?

Нет. Если под термином HTML5 понимать именно вёрстку. Сама концепция HTML5 предполагает наличие семантически оправданных тегов в разметке.

Link to comment
Share on other sites

  • 0

 

Почему сайт из блоков будет ниже?

. Более того, сайт будет ниже в выдаче если он не адаптирован под мобильные устройства (пруф).

Подтверждаю, нам даже из-за этого срочно пришлось менять дизайн. Но это даже пошло нам на пользу:)

Link to comment
Share on other sites

  • 0

Подтверждаю, нам даже из-за этого срочно пришлось менять дизайн. Но это даже пошло нам на пользу :)

А чем именно определяется наличие адаптации? правилами @media screen {}, Они должны быть не пустыми? Они должны иметь смысл?
Link to comment
Share on other sites

  • 0

Вот еще вопрос по верстке.

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

<header>  <div class="header">    ...  </div></header><nav>  <div class="nav">    ...  </div></nav>

 

Ну либо классы заменить на ID.

 

Или лучше писать так?

<header class="header"> ...</header><nav>  ...</nav>
Link to comment
Share on other sites

  • 0

 

Вот еще вопрос по верстке.

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

<header>  <div class="header">    ...  </div></header><nav>  <div class="nav">    ...  </div></nav>

Ну либо классы заменить на ID.

 

Или лучше писать так?

<header class="header"> ...</header><nav>  ...</nav>

Будут везде работать новые элементы, кроме IE. Для него нужен полифил:

<!--[if IE]><script>(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=;return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i();b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(:b}function t(a,{if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();a.createElement=function(c){return!e.shivMethods?b.createElem(c)(c,a,};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,;return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,{a||(a=f);if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);</script><![endif]-->
Link to comment
Share on other sites

  • 0

Понял. Значит второй вариант и не мучаемся. А этот код в отдельный js файл и подключать везде)

А будет ли он работать с селекторами типа nav {стиль: свойство;} или лучше стили через классы(идентификаторы) присваивать?

Link to comment
Share on other sites

  • 0

Понял. Значит второй вариант и не мучаемся. А этот код в отдельный js файл и подключать везде)

А будет ли он работать с селекторами типа nav {стиль: свойство;} или лучше стили через классы(идентификаторы) присваивать?

Будет. Если что, то код лучше всего подключать так:

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

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

Edited by afdw
Link to comment
Share on other sites

  • 0

спс. Буду этой ссылкой пользоваться. Заодно там поищу phghack.js. Скрипт исправляющий баг png прозрачности в ИЕ6. (Хотя таких мамонтов лучше сразу редиректить на страницу скачивания нормального браузера)))))))

 

Кстати, я так понимаю, что блочная верстка - это хорошо, но и таблицами брезговать не стоит.

Есть куча задач, где таблицы будут лучше. напр. верстка форм. или вывод товара в интернет магазине..... Да мало ли что еще.....

Link to comment
Share on other sites

  • 0
Кстати, я так понимаю, что блочная верстка - это хорошо, но и таблицами брезговать не стоит. Есть куча задач, где таблицы будут лучше. напр. верстка форм. или вывод товара в интернет магазине..... Да мало ли что еще.....
 

Таблицы применимы там, где пользователь должен будет увидеть таблицу.


спс. Буду этой ссылкой пользоваться. Заодно там поищу phghack.js. Скрипт исправляющий баг png прозрачности в ИЕ6. (Хотя таких мамонтов лучше сразу редиректить на страницу скачивания нормального браузера)))))))
 

Если заказчик этого не требует, то не советую поддерживать ниже 9 версии.

Link to comment
Share on other sites

  • 0

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

Как адаптировать сайт под мобильные устройства? Я проверил сайт тут https://www.google.com/webmasters/tools/mobile-friendly, выдались причины:

Ссылки слишком близко друг к другу
Контент шире экрана
Не задана область просмотра для мобильных устройств
Слишком мелкий шрифт

Это надо просто это исправить и сайт будет адаптирован?

Link to comment
Share on other sites

  • 0

 

Вот такой получился сайт.

Кошерно конечно.

Особенно мужик, настойчиво заливающий ванную акрилом под Шопена - завораживает )

 

Да уж, действительно завораживает :rofl:

Кстати это Бетховен "Fur Elise"

 

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

короче много чего...

 

а про дивы, я далеко не эксперт в верстке, сам тут постоянно спрашиваю..

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

 

А на оптимизацию html5 или дивы поисковику пофиг насколько я знаю. Вот мобильная - да важно.

Link to comment
Share on other sites

  • 0
сейчас html5 в перспективе

С прошлого октября HTML5 — действующая рекомендация W3C. В ближайшей перспективе — HTML5.1 (в планах на следующий год). Браузеров, не понимающих основ HTML5, практически не осталось.

Link to comment
Share on other sites

  • 0

 

однако он еще не всеми браузерами кjрректно воспринимается. Потому надежнее пока делать дивами и учить html5

 

Это какие такие браузеры?

 

Вот на википедии сказано какие теги из html5 поддерживаются какими браузерами.

как понимаю хоть все браузерами понимают html5, но не все элементы

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By tohastar
      Здравствуйте! Помогите разобраться. Для детского садика требуется создать карту сайта по новым требованиям. Карту создали с помощью генератора, внесли небольшие изменения в код, но теперь хочется упорядочить блоки по модулям на 4 столбика, как добавить новые столики понятно, главное их упорядочить. Т.е. для примера модуль подменю "важная информация" находится с верху и относящиеся к нему страницы вниз и так далее. Но к сожаление не понятно, как это можно реализовать, все добавленные вновь страницы идут последовательно вниз. Пришлось отделять тегами < p>, но вверх поднять их не получается.  http://vasilyek78.ucoz.ru/Dokument/SiteMap.html адрес расположения карты сайта.
    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By cozy_eternity
      Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь..

       
      <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
    • By konoplev_ps
      Добрый день.
      Проблема: Настраиваю в отдельном CSS стили для шрифтов h1, h2 и т.д., но когда начинаю их применять внутри тега div - не вижу изменений. Сам CSS подключил, в нем и другие настройки стилей, которые успешно применяются к файлу html.
    • By Bourdun
      Проблема с товарами. Не получается перенести товар так, чтобы он был справа от первого, а не под ним

      И да, float:right; переносит вообще в самое право самой страницы
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy