Раира

Dinow · June 13, 2011

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

Проверен в Mozilla 3.6, 4; IE 6-9; Opera 9-11; Chrome и Safari.

http://dinow.host22.com/Raira/

П.с. в частности хочется услышать мнения Светланы, Klierik-a, Psywalker-a, Serlutin-a

buddah · June 13, 2011

<b>(495)123-45-67</b>

разделяем оформление и структуру. Жирный шрифт нужно прописать в css.

Есть h2 и h3 - почему нет h1? Это важно с точки зрения СЕО и вообще структуры, по моему скромному мнению, верстальщик должен это учитывать.

Если используются

address

и

<!DOCTYPE html>

, то почему не используешь

<nav>

?

Это то, что в коде в глаза бросилось.

zSpx · June 13, 2011

градиент обрезан? Хром.

Dinow · June 14, 2011

<b>(495)123-45-67</b>
разделяем оформление и структуру. Жирный шрифт нужно прописать в css.

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

Есть h2 и h3 - почему нет h1? Это важно с точки зрения СЕО и вообще структуры, по моему скромному мнению, верстальщик должен это учитывать.

Если честно, не увидела куда его там приткнуть.. поместить в него лого?

Если используются
address
и
<!DOCTYPE html> 
, то почему не используешь
<nav> 
?

address - старый тег, а nav - из HTML5, который я пока не трогала.

П.с. Спасибо за замечания.

Dinow · June 14, 2011

градиент обрезан? Хром.

Уже нет)) исправила

Gaspode · June 14, 2011

<div class="footer"> 
   <address><span>Раира, 2007 год.</span>Адрес: Москва. м. Волжская,<br />улица Улица, дом 3, офис 231<br />(схема проезда) </address> 
   <address><span>Телефоны:<br />(495) 432-34-54</span>Факс: (433) 434-43-34<br />E-mail: raira@raira.ru </address> 
</div>

Тут микроформат лучше бы. То же самое с телефоном вверху.

Если честно, не увидела куда его там приткнуть.. поместить в него лого?

Почему бы и нет.

а nav - из HTML5, который я пока не трогала.

Дык а зачем тогда html5 в доктайпе?

Edited June 14, 2011 by Gaspode

Dinow · June 14, 2011

<div class="footer"> 
   <address><span>Раира, 2007 год.</span>Адрес: Москва. м. Волжская,<br />улица Улица, дом 3, офис 231<br />(схема проезда) </address> 
   <address><span>Телефоны:<br />(495) 432-34-54</span>Факс: (433) 434-43-34<br />E-mail: raira@raira.ru </address> 
</div>

Тут микроформат лучше бы. То же самое с телефоном вверху.

Не знаю ничего о микроформатах..пойду почитаю..

а nav - из HTML5, который я пока не трогала.
Дык а зачем тогда html5 в доктайпе?

О том что лучше использовать этот доктайп при любой верстке тут не однократно писали.

Vlad · June 14, 2011

Куцый какой-то HTML5. Этот доктайп конечно можно при любой вёрстке использовать, но в данном случае у вас выглядит как половинчатое решение. Сами собой напрашиваются теги <nav>, <header>, <footer>. К тому же стиль какой-то неодинаковый, в одном случае тег закрывается <br />, в другом нет <meta>. В HTML5 такое допустимо, но выглядит небрежно.

Хостинг под *nix, а там имеет значение регистр файлов. У вас изображения в Img, легко перепутать, лучше придерживаться нижнего регистра в именах файлов и папок.

Вместо <br /> лучше <p> использовать, через стили удобнее задавать межстрочное расстояние через padding-margin, а не прибегать к line-height. К тому же у вас span в подвале и так сделан блочным, так какой смысл его использовать?

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

http://htmlbook.ru/faq/kak-zamenit-tekst-izobrazheniem

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

Dinow · June 14, 2011

Куцый какой-то HTML5. Этот доктайп конечно можно при любой вёрстке использовать, но в данном случае у вас выглядит как половинчатое решение. Сами собой напрашиваются теги <nav>, <header>, <footer>. К тому же стиль какой-то неодинаковый, в одном случае тег закрывается <br />, в другом нет <meta>. В HTML5 такое допустимо, но выглядит небрежно.

Заменила дивы на <nav>, <header>, <footer>. Возник вопрос, а можно ли использовать несколько <nav> на странице? т.е. в данном случае и для <ul class="menu"> и для <ul class="nav"> ?

Все теги позакрывала.

Хостинг под *nix, а там имеет значение регистр файлов. У вас изображения в Img, легко перепутать, лучше придерживаться нижнего регистра в именах файлов и папок.

Привыкла уже так, но учту на будущее.

Вместо <br /> лучше <p> использовать, через стили удобнее задавать межстрочное расстояние через padding-margin, а не прибегать к line-height. К тому же у вас span в подвале и так сделан блочным, так какой смысл его использовать?

Поменяла <span> на <p>, но как <br /> убрать не поняла, там же переносятся строки внутри одного абзаца, не оборачивать же каждый кусочек в отдельный <p> ?

Заголовки в правой колонке через фон сделаны и невидимы при отключении картинок. Здесь почитайте решения для подобных случаев:
http://htmlbook.ru/faq/kak-zamenit-tekst-izobrazheniem
Опять же при отключении картинок пропадает фоновый рисунок, обычно его дублируют фоновым цветом, которого у вас нет. Добавьте к футеру и хедеру.

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

К футеру и хедеру фон добавила.

Большое спасибо за указания на ошибки, Влад!

Vlad · June 14, 2011

Вы уж слишком прямолинейно мои слова не воспринимайте, если я говорю, что лучше <p> использовать, это не означает, что надо бросаться его сразу же ставить. В вашем случае и <br> успешно выполняет свою роль.

Раз вы уже на HTML5 перешли, то можно ещё некоторые дополнения сделать.

- div class="sidebar" заменить на <aside>, специально для этих целей тег.

- для вывода новостей обычно используется <article>.

- <nav> хотя и можно использовать несколько раз, в спецификации сказано, что он для самой-самой главной навигации. У вас сейчас как надо стоит.

Ну и обязательно костыли для некоторых браузеров поставить:

Для Firefox3 в стили добавить nav, footer, header, ещё что {display:block;}

Для IE7-8 надо скрипт писать и перечислять все теги

  <script>
   document.createElement('aside');
   document.createElement('header');
  </script>

Или более изощренно

<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->

Естественно надо удалить из списка неиспользуемые теги.

Dinow · June 14, 2011

Вот поэтому я не хотела теги HTML5 использовать, если уж начинать, то в итоге придется полностью переходить

Тогда может сразу <div class="content"> поменять на <section>?

<div class="sidebar"> меняю на <aside>, а <div class="news"> на <article>, да? или каждую новость в отдельный <article> и в общий <section>?

И может левую навигацию в <menu> сделать? или это уже лишнее?

display:block сделала, а на счет скрипта для ИЕ не знала.. спасибо, добавлю.

Vlad · June 14, 2011

Ну, почему бы и не перейти на HTML5 с сегодняшнего дня --- хорошая погода, чем не повод для перехода.

<menu> для других целей, не надо использовать его для навигации.

По хорошему, каждая новость должна быть обёрнута в <article>, если желаете, можете общий <section> использовать, здесь уже жёстких рекомендаций нет. <section> для разделов, сами решайте, где они должны быть. Есть только одно небольшое различие от HTML4 --- там <h1> использовался один раз, в HTML5 каждый раздел (section, article) создаёт независимую структуру внутри документа, поэтому логичнее внутри них применять <h1> каждый раз.

Dinow · June 15, 2011

Изменения сделала, теперь получился мой первый сайт на HTML5)) Влад, спасибо вам за помощь и объяснения!

Может еще какие нибудь замечания или советы будут?

Gaspode · June 15, 2011

Микроформат так и не прицепили =)

Vlad · June 15, 2011

Изменения сделала, теперь получился мой первый сайт на HTML5)) Влад, спасибо вам за помощь и объяснения!
Может еще какие нибудь замечания или советы будут?

<nav> не заменяет <ul>, верните этот тег на место!

Можно ещё удалить type="text/css" в <link>, он в HTML5 теперь по умолчанию, можно не добавлять.

Анна · June 16, 2011

У меня вот так открывается(и в Хроме12 и в ИЕ8):

nadop · June 16, 2011

У меня вот так открывается(и в Хроме12 и в ИЕ8):

У меня так же открывается в FireFoxe под убунтой

Dinow · June 18, 2011

Микроформат так и не прицепили =)

Прицепила) только не знаю насколько правильно..

<nav> не заменяет <ul>, верните этот тег на место!
Можно ещё удалить type="text/css" в <link>, он в HTML5 теперь по умолчанию, можно не добавлять.

Сделано.

У меня вот так открывается(и в Хроме12 и в ИЕ8):

У меня так же открывается в FireFoxe под убунтой

Можете теперь посмотреть? у меня везде нормально показывает

psywalker · June 18, 2011

Микроформат так и не прицепили =)
Прицепила) только не знаю насколько правильно..

Неправильно. Во-первых vcard является главным элементом в этом формате, а значит он должен быть один на странице. Незачем помещать их в разных местах, достаточно сделать это один раз в подвале. Во-вторых <address class="vcard"> написано два раза, что тоже плохо, потому что vcard должен быть классом одного общего блока с микроданными. Ну и в-третьих есть ещё небольшие замечания насчёт разметки свойств микроформата. Например

<p class="adr">Адрес: Москва. м. Волжская,<br />улица Улица, дом 3, офис 231<br />(схема проезда)</p>

Надо заменить на:

  <div class="adr">
    <span class="locality">Адрес: Москва.</span>,
    <span class="street-address"> м. Волжская,<br />улица Улица, дом 3, офис 231<br />(схема проезда)</span>
  </div>

Dinow · June 18, 2011

Неправильно. Во-первых vcard является главным элементом в этом формате, а значит он должен быть один на странице. Незачем помещать их в разных местах, достаточно сделать это один раз в подвале. Во-вторых <address class="vcard"> написано два раза, что тоже плохо, потому что vcard должен быть классом одного общего блока с микроданными. Ну и в-третьих есть ещё небольшие замечания насчёт разметки свойств микроформата. Например
<p class="adr">Адрес: Москва. м. Волжская,<br />улица Улица, дом 3, офис 231<br />(схема проезда)</p>
Надо заменить на:
  <div class="adr">
    <span class="locality">Адрес: Москва.</span>,
    <span class="street-address"> м. Волжская,<br />улица Улица, дом 3, офис 231<br />(схема проезда)</span>
  </div>

- можно тогда class="vcard" прицепить сразу к футеру?

- а зачем менять <p> на <div>? у меня тогда вся верстка в футере разваливается, не могу сообразить почему..

psywalker · June 18, 2011

- можно тогда class="vcard" прицепить сразу к футеру?
- а зачем менять <p> на <div>? у меня тогда вся верстка в футере разваливается, не могу сообразить почему..

1. Можно

2. Не меняй.

Dinow · June 18, 2011

- можно тогда class="vcard" прицепить сразу к футеру?
- а зачем менять <p> на <div>? у меня тогда вся верстка в футере разваливается, не могу сообразить почему..
1. Можно
2. Не меняй.

Коротко и ясно

И все же почему изза <div>-а все ломается? пропадают float, margin-ы, padding-и

psywalker · June 18, 2011

- можно тогда class="vcard" прицепить сразу к футеру?
- а зачем менять <p> на <div>? у меня тогда вся верстка в футере разваливается, не могу сообразить почему..
1. Можно
2. Не меняй.
Коротко и ясно
И все же почему изза <div>-а все ломается? пропадают float, margin-ы, padding-и

1. Краткость - сестра таланта

2. Ну тут уже нужно в коде у тебя рыться, в стилях.

Кстати ща попробовал, ничего не сломалось вроде.

Dinow · June 18, 2011

1. Краткость - сестра таланта
2. Ну тут уже нужно в коде у тебя рыться, в стилях.
Кстати ща попробовал, ничего не сломалось вроде.

Странно.. проверила в других браузерах, и правда все в порядке.. а мазила 3.6. упорно начинает игнорировать стили заданные для <address>

Dinow · June 18, 2011

Разобралась, везде отображается как надо.

psywalker, спасибо за помощь с микроформатами.

Sign In

Раира

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information