Верстка макета

[novicheG]

Добрый день форумчане.

Сверстал (учебный) макет, буду благодарен за все комментарии и критику.

- Макет

- Верстка

——--

Верстка: резина

Тестилось в: IE6+, Opera 9.63+, FF3.6+, Chrome 10, Safari 4

Также хотелось бы после комментария примерную оценку по вашему мнению, сколько и из скольки баллов.

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

[swetlana]

тут и критиковать-то нечего.

Если б не надпись «My first layout» в заголовке, легко можно принять за работу профессионала достойного уровня.

Замечание есть не столько по вёрстке, сколько по юзабилити. Но вёрсткой это можно исправить.

Когда текст растягивается на всю ширину на больших экранах, читать неудобно. max-width бы задать.

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

И раз уж надо в баллах, то 5 из 5

[novicheG]

swetlana, спасибо) верстка, правильнее выразиться - первая которую старался делать именно качественно, до этого верстал кое-что, немного, (не макеты сайтов) - страницы, оформления скриптов, - просто на обум, не зная спецификаций и других страшных вещей), это уже после прочтения спеки, 1-2-х книг и чтения/общения на форуме. По замечанию согласен - поправлю, я тоже хотел так делать.

Edited April 9, 2011 by novicheG

[artur33]

novicheG вёрстка отличная, вы не можете подсказать, какие форумы читали и книги?

[psywalker]

Просили оценку, ну что ж, получайте.

1. Наверху есть отдельные стили для ИЕ6. Почему нет стилей для других ИЕ, которые ещё к тому же надо и объединить?

2. Логотип обычно - это ссылка, в которой есть ещё и титл.

3. Серый фон у шапки можно было повесить на body смело, а правую картинку как фон на шапку. Лишние необоснованные элементы, это очень хреново.

4. <div class="left"> - что за left, я не знаю, кто это. Классы нужно задавать осмысленные.

5. <ul class="menu"> - то же самое, что за menu, непонятно мне вообще.

6. <h5>31.12.2002</h5> - что за ужас? Зачем тут заголовок. Сделай <span class="date">31.12.2002</span>, и будет намного лучше и понятнее.

7. Сама новость

<h5>31.12.2002</h5>
<p class="news_bottom_line">To use flash and navi gate, fully customizab i syst add discussing andby topic oro alliscussing andy.</p>

Что за бред? Почему каждая новость не в своём блоке? Почему всё замешано в одной кастрюле? Каждая новость - это отдельный самодостаточный раздел.

8. <p class="news_bottom_line"> - вот это очень и очень хреново. В пункте 7 я уже говорил, что для каждой новости нужен свой блок и уже ему ты можешь делать хоть 10 границ.

9. <div class="right"> - не знаю такого. Намного лучше писать <div class="aside2">

10. <form class="search" action=""> - Почему атрибут action пустой? Ставь хотя бы решётку.

11.

<div class="first_caption">
<h1>Welcome to company name</h1>
</div>

Что за бред вообще? Зачем лишняя обёртка? Там легко можно было обыграть ситуацию по другому, и обойтись всего одним элементом.

12. <h1>Welcome to company name</h1> - какого чёрта на странице 10 заголовков первого уровня?

13.

<div class="nav">
						<a href="#">Main page</a>/<a href="#">Products</a>/<span>Downloads</span>

					</div>

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

14. <div class="about about1"> - Что за класс about1? Вообще не вижу смысла в нём в этом месте. Кстати, а что он вообще делает)

15. <form class="search" action=""> - Всё же наверное нужно было её прибить абсолютом, а не зафлоачивать. Но это имхо возможно.

16. <div class="bm_bg1"> - вот эта хрень явно лишняя тоже, спокойно можно было без неё обойтись. И лучше бы класс на список повесил.

17. Кстати нижняя относится к футеру, так что тут так же грубая ошибка.

18.

<!-- ie6-7 bag with closed li

- Вот это что за хрень? Какой нафиг баг? Тут виден не баг, а дикая нехватка знаний и от этого безнадёга в выборе вёрстки этого элемента.

19. В ИЕ6 вёрстка прыгает иногда, когда резко дёргаешь экран туда-сюда.

20.<div class="article_wrap_top"> - Вот этот блок сделан совершенно неправильно. Картинка <img alt="friends" src="img/article_img_friends.png" class="img_friends">, которая засоряет структуру, должна была быть фоном какого нибудь пустого span-a, а текст внутри блока <div class="article article1"> должен просто обтекать картинку слева, а не иметь левый отступ.

Убираем картинку и ппц, текст остаётся на месте. Грубая ошибка.

21. В стилях нет совершенно организации. Очень плохо.

22. Много лишних элементов, заголовков и прочего. Необдуманно свёрстаны элементы, понатыкано ненужных обёрток и т.д.

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

Оценка по 10-ой шкале: 1 (максимум).

В общем Плохо!

swetlana

В будущем оценивайте пожалуйста работы объективно. Открою вам секрет, кроме самых высоких баллов, которые вы ставите всем подряд, есть ещё и низкие

novicheG вёрстка отличная, вы не можете подсказать, какие форумы читали и книги?

Совершенно не увидел там никакого качества. Там его нет.

[artur33]

6. <h5>31.12.2002</h5> - что за ужас? Зачем тут заголовок. Сделай <span class="date">31.12.2002</span>

, и будет намного лучше и понятнее.

вы просто придираетесь, да конечно так удобнее и качественнее...

4. <div class="left"> - что за left, я не знаю, кто это. Классы нужно задавать осмысленные.
5. <ul class="menu"> - то же самое, что за menu, непонятно мне вообще. 
14. <div class="about about1">

Главное чтоб автору было понятно

<h1>Welcome to company name</h1> - какого чёрта на странице 10 заголовков первого уровня?

согасен? и очень много с чем согласен..

у вас очень много опыта, но вы мне кажется придираетесь..

Edited April 9, 2011 by artur33

[psywalker]

это уже после прочтения спеки, 1-2-х книг и чтения/общения на форуме.

Это ничтожно мало для начала.

вы просто придираетесь, да конечно так удобнее и качественнее...

Запомни дружище, я никогда ни к кому не придираюсь, а всегда говорю по факту. И мало того, я ещё не тестил, как следует, а только бегло пробежался по коду.

[artur33]

ясно) а можете посоветовать учебники?

[psywalker]

ясно) а можете посоветовать учебники?

Вот такой вот совет от меня лично http://forum.htmlbook.ru/index.php?showtopic=25566&view=findpost&p=191420

[artur33]

спасибо за дельный совет)

[psywalker]

спасибо за дельный совет)

Не за что. Главное, чтобы ты сделал правильные выводы из прочитанного.

[mishka]

В общем нормальная верстка.

Макс, не придирайся большинство твоих замечаний - придирки.

С твоими замечаниями соглашусь только по поводу блока новостей и заголовков.

класс menu - старый добрый класс для манюх, кстати в джумле именно с таким классом выводятся менюхи по дэфолту.

Бредкрамб на списках хорошо, но войны небудет если сделать так как сделал ТС.

скажи ка мне чем плохо "/" в бредкрамбе? Хотя это лучше спросить.. например у Veseloff.

ТС, это тебе пряник но не зазнавайся.

Макс, нету единственно правильного варианта верстки, сколько верстальщиков столько и вариантов, и если этот вариант не такой как у тебя - это не значит что он не верный.

[psywalker]

В общем нормальная верстка.

Макс, не придирайся большинство твоих замечаний - придирки.

Я не навязываю Медведь. Человек просил меня написать своё мнение, я это сделал, а прислушаться к нему или нет, это уже его личное дело.

Бредкрамб на списках хорошо, но войны небудет если сделать так как сделал ТС.

скажи ка мне чем плохо "/" в бредкрамбе? Хотя это лучше спросить.. например у Veseloff.

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

Макс, нету единственно правильного варианта верстки, сколько верстальщиков столько и вариантов, и если этот вариант не такой как у тебя - это не значит что он не верный.

Дружище, ты слышал уже, на сколько баллов из 10-и я оцениваю свою (по моему мнению) самую лучшую вёрстку?

[mishka]

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

Кто ругал? Посмотри, например, на бредкрамб этого форума. И так правильно, имхо, так как при увелечении шрифта и разделитель станет больше, да и картинок меньше.

[psywalker]

Кто ругал? Посмотри, например, на бредкрамб этого форума. И так правильно, имхо, так как при увелечении шрифта и разделитель станет больше, да и картинок меньше.

Ругали хорошие люди.

И если уж делать хлебные крошки, то списком, а эту штуку засовывать в лишки.

[mishka]

Ругали хорошие люди.

И если уж делать хлебные крошки, то списком, а эту штуку засовывать в лишки.

То как делать списком или нет и куда совать - это другой вопрос.

Сам за списки, так как это правильно с точки зрения Web Accessibility или Section 508. Точно уже и не скажу, так как давно верстал под такие требования.

Там нужно линки разделять друг от друга блочными элементами.

Я сейчас говорю о том что делать такие разделители текстом более правильно чем картинками.

[psywalker]

Я сейчас говорю о том что делать такие разделители текстом более правильно чем картинками.

А, да с этим нет проблем, даже согласен, и, да, так даже будет правильно

[swetlana]

Оценка по 10-ой шкале: 1 (максимум).

В общем Плохо!

ну в общем всё правильно

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

Да, от такого можно начинать учиться.

Да, в придирках psywalker'а большинство по делу.

Но предела совершенству нет, а наблюдаем мы уже вполне достойный уровень.

На мой взгляд дальше нужна в первую очередь практика.

[psywalker]

Да, в придирках psywalker'а большинство по делу.

Я ещё не придирался ни грамма. Если бы захотел придраться, то боюсь, что человек подумал бы в итоге, что он выбрал неправильную профессию

[artur33]

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

разве так правильно?

[psywalker]

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

разве так правильно?

Это холиварный вопрос. Не стоит его поднимать тут.

[Serlutin]

>>1. Наверху есть отдельные стили для ИЕ6. Почему нет стилей для других ИЕ, которые ещё к тому же надо и объединить?

Вопрос. А зачем делать стили для других IE, если они не нужны.

>>4. <div class="left"> - что за left, я не знаю, кто это. Классы нужно задавать осмысленные.

Как мне кажется, .left вполне осмысленное название. А если вдруг в будущем изменится дизайн, то с вероятностью 90% вёрстка тоже полностью изменится.

>>5. <ul class="menu"> - то же самое, что за menu, непонятно мне вообще.

Полностью согласен. .super-puper-main-navigation-menu-in-left-sidebar было бы лучше.

>>6. <h5>31.12.2002</h5> - что за ужас? Зачем тут заголовок. Сделай <span class="date">31.12.2002</span>, и будет намного лучше и понятнее.

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

>>7. Сама новость

<h5>31.12.2002</h5>[/i]
<p class="news_bottom_line">To use flash and navi gate, fully customizab i syst add discussing andby topic oro alliscussing andy.</p>

Что за бред? Почему каждая новость не в своём блоке? Почему всё замешано в одной кастрюле? Каждая новость - это отдельный самодостаточный раздел.

Зачем вставлять лишний DIV если он не нужен?

>>9. <div class="right"> - не знаю такого. Намного лучше писать <div class="aside2">

Какой ещё .aside2? .content или .main или ещё что-нибудь, но не .aside2

>>12. <h1>Welcome to company name</h1> - какого чёрта на странице 10 заголовков первого уровня?

Да, <h1> там явно не к месту. Всё-таки в HTML 4 структуру выстраивать можно только с помощью заголовков. Сейчас же её выстроить нельзя.

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

Почему? ПОЧЕМУ? Я понимаю, что этот совет пошёл со времен, когда навигацию делали таблицей. Естественно список лучше, чем таблица. Что изменится в конкретном случае при добавлении списка? Только несколько лишних пунктов в CSS.

>>14. <div class="about about1"> - Что за класс about1? Вообще не вижу смысла в нём в этом месте. Кстати, а что он вообще делает)

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

>>17. Кстати нижняя [панель] относится к футеру, так что тут так же грубая ошибка.

Что же в этой ошибке грубого? Только то что .bottom_menu не входит в .footer. Если кто-то будет насаживать это на CMS, то ему совершенно всё-равно, как классы называются.

>>19. В ИЕ6 вёрстка прыгает иногда, когда резко дёргаешь экран туда-сюда.

В IE1 вообще ничего не работает. Очень плохо.

>>21. В стилях нет совершенно организации. Очень плохо.

Почему нет? Там есть совершенно чёткая организация. Комментарии, которые делят css на блоки и т. д. То что блоки не отделяются символами табуляции, то это всёго-лишь вопрос удобства.

Edited April 9, 2011 by Serlutin

[psywalker]

>>>>>>1. Наверху есть отдельные стили для ИЕ6. Почему нет стилей для других ИЕ, которые ещё к тому же надо и объединить?

Вопрос. А зачем делать стили для других IE, если они не нужны.

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

>>>>>>>4. <div class="left"> - что за left, я не знаю, кто это. Классы нужно задавать осмысленные.

Как мне кажется, .left вполне осмысленное название. А если вдруг в будущем изменится дизайн, то с вероятностью 90% вёрстка тоже полностью изменится.

Левая колонка должна иметь осмысленное название, например aside

>>>>>>>>>5. <ul class="menu"> - то же самое, что за menu, непонятно мне вообще.

Полностью согласен. .super-puper-main-navigation-menu-in-left-sidebar было бы лучше.

Да, вот так всегда и пиши. Будешь .super-puper-main-navigation-menu-in-left-sidebar верстальщик)

>>>>>>>>>>>>>6. <h5>31.12.2002</h5> - что за ужас? Зачем тут заголовок. Сделай <span class="date">31.12.2002</span>, и будет намного лучше и понятнее.

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

Потому что заголовок новости != её дата. Странно, что для тебя нет разницы.

>>>>>>>>>>>>>7. Сама новость

<h5>31.12.2002</h5>[/i]
<p class="news_bottom_line">To use flash and navi gate, fully customizab i syst add discussing andby topic oro alliscussing andy.</p>

Что за бред? Почему каждая новость не в своём блоке? Почему всё замешано в одной кастрюле? Каждая новость - это отдельный самодостаточный раздел.

Зачем вставлять лишний DIV если он не нужен?

Здесь как раз таки он нужен, даже очень. Так легче управлять общим блоком, и разделами в частности. Нужно думать не только о себе, когда верстаешь, но и о практичности того или иного участка.

Кстати можно было даже сделать список.

>>>>>>>>>9. <div class="right"> - не знаю такого. Намного лучше писать <div class="aside2">

Какой ещё .aside2? .content или .main или ещё что-нибудь, но не .aside2

Да, тут лучше .content, я имел ввиду вообще правые сайдбары лучше называть aside2, а тут, да, лучше .content однозначно.

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

Почему? ПОЧЕМУ? Я понимаю, что этот совет пошёл со времен, когда навигацию делали таблицей. Естественно список лучше, чем таблица. Что изменится в конкретном случае при добавлении списка? Только несколько лишних пунктов в CSS.

Я уже объяснял выше.

>>>>>>>>>>>>14. <div class="about about1"> - Что за класс about1? Вообще не вижу смысла в нём в этом месте. Кстати, а что он вообще делает)

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

На данный момент я вообще не увидел причастность этого класса к делу.

>>>>>>>>>>>17. Кстати нижняя [панель] относится к футеру, так что тут так же грубая ошибка.

Что же в этой ошибке грубого? Только то что .bottom_menu не входит в .footer. Если кто-то будет насаживать это на CMS, то ему совершенно всё-равно, как классы называются.

Логичнее помещать ссылки на другие страницы и т.д в Футер. Ты же учишь HTML5, должен знать вроде.

>>>>>>>>>>>19. В ИЕ6 вёрстка прыгает иногда, когда резко дёргаешь экран туда-сюда.

В IE1 вообще ничего не работает. Очень плохо.

ИЕ1 меня не волнует, автор упоминал только о ИЕ6.

>>>>>>>>>>>>>>>21. В стилях нет совершенно организации. Очень плохо.

Почему нет? Там есть совершенно чёткая организация. Комментарии, которые делят css на блоки и т. д. То что блоки не отделяются символами табуляции, то это всёго-лишь вопрос удобства.

Ок, у каждого свой подход к делу.

[Serlutin]

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

Просто в ie6.css содержатся чисто специфичные ошибки. min-width, двойной маргин ит. д. Макет сам по себе не сложный, так что особых проблем с IE7 и 8 возникнуть не должно. В будущем можно вообще удалить ie6.css и использовать один файл стилей для всех браузеров.

>>Потому что заголовок новости != её дата. Странно, что для тебя нет разницы.

Мне кажется, что дата может заменять заголовок при его отсутствии. Представим себе какой-нибудь путеводный дневник. В нём надпись «9 апреля» выполняет функцию заголовка, так как потом рассказывается, что случилось в этот день. Однако, если есть заголовок «Весёлые приключения», а где-нибудь в углу надпись 9.04, то тут это уже пояснение к заголовку, но не сам заголовок. Возможно, я и ошибаюсь.

>>Логичнее помещать ссылки на другие страницы и т.д в Футер. Ты же учишь HTML5, должен знать вроде.

В HTML5 с <footer> вообще всё сложно. Если смотреть применительно к этому макету, то естественно белая полоска тоже к нему относится (причём её ещё в <nav> нужно обернуть). Но в вёрстка сделана в xhtml, поэтому можно делать по желанию и удобству стилизации.

[psywalker]

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

Просто в ie6.css содержатся чисто специфичные ошибки. min-width, двойной маргин ит. д. Макет сам по себе не сложный, так что особых проблем с IE7 и 8 возникнуть не должно. В будущем можно вообще удалить ie6.css и использовать один файл стилей для всех браузеров.

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

>>Потому что заголовок новости != её дата. Странно, что для тебя нет разницы.

Мне кажется, что дата может заменять заголовок при его отсутствии. Представим себе какой-нибудь путеводный дневник. В нём надпись «9 апреля» выполняет функцию заголовка, так как потом рассказывается, что случилось в этот день. Однако, если есть заголовок «Весёлые приключения», а где-нибудь в углу надпись 9.04, то тут это уже пояснение к заголовку, но не сам заголовок. Возможно, я и ошибаюсь.

Да, ты ошибаешься. Если «9 апреля» - идёт как заголовок статьи, то его можно и нужно выделять в заголовок, а если «9 апреля» идёт в качестве даты статьи и т.д, то для этих целей существует элемент <time> со своим атрибутом datetime и pubdate

>>Логичнее помещать ссылки на другие страницы и т.д в Футер. Ты же учишь HTML5, должен знать вроде.

В HTML5 с <footer> вообще всё сложно. Если смотреть применительно к этому макету, то естественно белая полоска тоже к нему относится (причём её ещё в <nav> нужно обернуть). Но в вёрстка сделана в xhtml, поэтому можно делать по желанию и удобству стилизации.

Доктайп не важен. Вся инфа об авторе, сведения об авторских правах, ссылки на похожие документы и т.д., должны находится в Футере.