Вёрстка ламера №3

[Clayton]

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

Вот ссыль - http://www.ivblog.ru/orange/index.htm

[Fu-tai]

Ну вот сколько раз твердить об одном и томже. Ну подписывайте вы картинки, проставляйте у них альты ми титлы, это полезно, это не сложно, это удобно, это говорит о вашем уровне!!! Подчёркивайте ссылки, пунктиром, сплошной, зигзагообразной, не важно главное дать понять что, это ссылка и ни что иное. Ну отрабатывайте вы ховер у ссылок, ну прописывайте вы у них титлы в конце-то концов. Это же так просто, но зато как полезно и приятно для посетителя! Ну думайте вы головой когда верстаете, не торопитесь всё засовывать в блоки и писать стили, задумайтесь, ну почему люди годами разрабатывают спецификации о заголовках, списках, спец тегам, микроформатам и прочем. Ну не плюйте вы им в души, ведь семантика это просто, просто представте что вы пишете книгу или верстаете статью в литературный журнал. Не важно о чём сайт, не важно какой он формы и структуры, в нём стопроцентов есть заголовки, есть списки(нумерованные\не нумерованные), есть параграфы, есть списки определений, есть спец теги, есть цитаты и выдержки. Ну это же не сложно. Блоки это просто блоки, они безлики и нужны лишь для глобальной разметки, блоков на странице. Таблицы подввязывать на разметку это конечно же можно, но в ооочень крайних случаях, зачем? то что вы сделали таблицей легко делается списком. Ну зачем, зачем эти лишние обёртки в дивы, зачем усложнять жизнь браузеру?! И ну когда же вы научитесь что поля для ввода надо подписывать, ну хоть как нибудь, ну хоть чем нибудь показывая зачем оно нужно! и копирайт тоже имеет свои стандарты, также как и начертание телефонов и прочих цифр.

А в целом, слишком много блоков. Не хватает семантики. Рисунки которые надо было делать фоновыми сделаны не фоном, что портит вид при отключённых стилях. При отключённых картинках немного теряемси, ибо не одной фоновой графики не присутствует, то белый лист с разбросанным текстом, ни одна картинка не подписана. Адаптивность вёрстки конечно есть, но она слабенькая, не доведённая до ума!

Слишком много классов, которые по сути не нужны, слишком много идентификаторов, которые тоже были бы лишние. А версия для печати хде?

[psywalker]

Fu-tai

Хорошие у вас развёрнутые ответы, а не могли-бы дать такой-же насчёт этой вёрстки:

http://psywalker.ru/First-Orange/main-page.html

[yopopt]

psywalker, создай новую тему.

<div class="line"><div></div></div>

Как-то некрасиво.

		 <form action="#"><p>
			 <input type="text" />
			 <span></span></p>
		 </form>

Это можно сделать без пустого тега span.

[psywalker]

yopopt

psywalker, создай новую тему

1) уже создавал, просто так заодно решил))

2)

<div class="line"><div></div></div>

Как-то некрасиво. wink.gif

Некрасиво, но другого выхода не видел, если можно, то подсказочку плиз

[yopopt]

Всё просто. Убери вложенный div, а стили для внешнего поменяй на:

div.line {
	background: url(../img/top-line.jpg) repeat-x scroll center center;
	border-color: #D8AF32;
	border-style: solid;
	border-width: 0 5em 0 30em;
	height: 0.2em;
	margin-top: 8em;
}

Используй border нужной ширины справа и слева.

[psywalker]

yopopt

слушай, спасибо за идею, и правда хороший вариант, вот блин правильно говорят - Век живи, век учись!

[Игорь Ермаков]

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

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

[Clayton]

Ну вот сколько раз твердить об одном и томже. Ну подписывайте вы картинки, проставляйте у них альты ми титлы, это полезно, это не сложно, это удобно, это говорит о вашем уровне!!! Подчёркивайте ссылки, пунктиром, сплошной, зигзагообразной, не важно главное дать понять что, это ссылка и ни что иное. Ну отрабатывайте вы ховер у ссылок, ну прописывайте вы у них титлы в конце-то концов. Это же так просто, но зато как полезно и приятно для посетителя! Ну думайте вы головой когда верстаете, не торопитесь всё засовывать в блоки и писать стили, задумайтесь, ну почему люди годами разрабатывают спецификации о заголовках, списках, спец тегам, микроформатам и прочем. Ну не плюйте вы им в души, ведь семантика это просто, просто представте что вы пишете книгу или верстаете статью в литературный журнал. Не важно о чём сайт, не важно какой он формы и структуры, в нём стопроцентов есть заголовки, есть списки(нумерованные\не нумерованные), есть параграфы, есть списки определений, есть спец теги, есть цитаты и выдержки. Ну это же не сложно. Блоки это просто блоки, они безлики и нужны лишь для глобальной разметки, блоков на странице. Таблицы подввязывать на разметку это конечно же можно, но в ооочень крайних случаях, зачем? то что вы сделали таблицей легко делается списком. Ну зачем, зачем эти лишние обёртки в дивы, зачем усложнять жизнь браузеру?! И ну когда же вы научитесь что поля для ввода надо подписывать, ну хоть как нибудь, ну хоть чем нибудь показывая зачем оно нужно! и копирайт тоже имеет свои стандарты, также как и начертание телефонов и прочих цифр.

А в целом, слишком много блоков. Не хватает семантики. Рисунки которые надо было делать фоновыми сделаны не фоном, что портит вид при отключённых стилях. При отключённых картинках немного теряемси, ибо не одной фоновой графики не присутствует, то белый лист с разбросанным текстом, ни одна картинка не подписана. Адаптивность вёрстки конечно есть, но она слабенькая, не доведённая до ума!

Слишком много классов, которые по сути не нужны, слишком много идентификаторов, которые тоже были бы лишние. А версия для печати хде?

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

Вопросы по сабжу есть:

1) Подчёркивайте ссылки, пунктиром, сплошной, зигзагообразной, не важно главное дать понять что, это ссылка и ни что иное. - Ссылки делались в соответствии с макетом

2) то что вы сделали таблицей легко делается списком. - Покажите) А то мне неопытному например, даже не понято, о какой таблице речь идет.

3) И ну когда же вы научитесь что поля для ввода надо подписывать, ну хоть как нибудь, ну хоть чем нибудь показывая зачем оно нужно! - Дык это уже вопрос к дизайнеру наверное...

4) и копирайт тоже имеет свои стандарты, также как и начертание телефонов и прочих цифр. - Дык это тоже наверное вопрос к дизайнеру наверное...

5) А в целом, слишком много блоков. - Приведите пожалста пример лишнего блока и вариант сделать без него. Ну хоть парочку пожалста.

6) Не хватает семантики. - Где?

7) Адаптивность вёрстки конечно есть, но она слабенькая, не доведённая до ума! - Можно примеры, из того, что не доделал?

По всему что в пунктах не указал, согласен, вопросов нед.

[Fu-tai]

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

Вопросы по сабжу есть:

1) Подчёркивайте ссылки, пунктиром, сплошной, зигзагообразной, не важно главное дать понять что, это ссылка и ни что иное. - Ссылки делались в соответствии с макетом

2) то что вы сделали таблицей легко делается списком. - Покажите) А то мне неопытному например, даже не понято, о какой таблице речь идет.

3) И ну когда же вы научитесь что поля для ввода надо подписывать, ну хоть как нибудь, ну хоть чем нибудь показывая зачем оно нужно! - Дык это уже вопрос к дизайнеру наверное...

4) и копирайт тоже имеет свои стандарты, также как и начертание телефонов и прочих цифр. - Дык это тоже наверное вопрос к дизайнеру наверное...

5) А в целом, слишком много блоков. - Приведите пожалста пример лишнего блока и вариант сделать без него. Ну хоть парочку пожалста.

6) Не хватает семантики. - Где?

7) Адаптивность вёрстки конечно есть, но она слабенькая, не доведённая до ума! - Можно примеры, из того, что не доделал?

По всему что в пунктах не указал, согласен, вопросов нед.

1) 3) - это конечно вопрос к дизайнеру, но верстальщик это не чисто знание хтмл и прочих технологий, это определённая прослойка, каста если можно сказать людей которые связывают воедино очень много правил и техник, и в случае если что-то дизайнер забыл или не знал надо ему об 'jv сказать и аргументировать почему должно быть так. В крайнем случае надо просто сделать это самому. Так от надписи "искать здесь" "поиск" и т.д. в поле поиска никто не растроиться, а пользователю будет приятно и клиент думаю оценит. Тоже самое со ссылками, дизайнер мог просто забыть про это или же не знать что ссылки надо подчёркивать. Просто примите для себя тот факт что это всё обязанности верстальщика, связывать дизайн и техническое исполнение.

2) ну к примеру "Кредитная линия на любой вкус" под ней таблица, которая по сути должна быть списком.

<table cellspacing="0" class="nav">
	<tr>
<td><div><img src="img/orange_03.jpg" alt=""/><a href="#">На неотложные нужды</a><span></span></div></td>
<td><div><img src="img/orange_05.jpg" alt=""/><a href="#">Автокредит</a><span></span></div></td>
<td><div><img src="img/orange_07.jpg" alt=""/><a href="#">На образование</a><span></span></div></td>
<td><div><img src="img/orange_09.jpg" alt=""/><a href="#">На отдых</a></div></td>
</tr></table>

как построить список думаю объяснять не надо. Засуньте всё это в список примените флоа к элементам списка, добавть к ним бэкграунды и отрегулируйте отступы и всё бкдет намного лучше и семантичней.

5) <div class="sidebar">, <div class="copy">, <div class="lang"> ну и т.д. всё это либо лишнее либо надо заменить на списки или параграфы.

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

6) Семантика, семантика. Ну посматрите у вас ниодного заголовка второго уровня и ниже, теже "Кредитная линия на любой вкус", "Кратко о банке" и т.д. надо бы обернуть в соответствующие теги, параграфы не заданы в некоторых местах.

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

[psywalker]

Fu-tai

2) ну к примеру "Кредитная линия на любой вкус" под ней таблица, которая по сути должна быть списком.

Кстати насчёт вот этого примера я бы поспорил с вами, так как сам лично верстал этот макет и также сделал это меню таблицей, почему? Да потому что иногда бывают такие вещи, которые лучше делать таблицей, дабы добиться цели и нужного результата. Не думайте, что я люблю таблицы или использую её повсюду, нет, просто я иногда жертвую семантикой ради красоты и цели, приходится знаете-ли... Я пол-дня убил на то, что-бы сделать это меню списком, но потом понял, что этот вариант не прокатит (по крайней мере у меня), точнее добиться такого же эффекта списком не получиться..Потому-что задача диктует условия, которые под силу только таблице, или можно списком, но с небольшими косяками, а где-то и покрупнее..Так что если у вас найдётся время, посветите его этой задаче ради интереса, заодно и людей порадуете, потому-что все, кто верстал этот макет, верстали это меню именно Таблицей

Edited June 18, 2009 by psywalker

[Clayton]

Fu-tai

Кстати насчёт вот этого примера я бы поспорил с вами, так как сам лично верстал этот макет и также сделал это меню таблицей, почему? Да потому что иногда бывают такие вещи, которые лучше делать таблицей, дабы добиться цели и нужного результата. Не думайте, что я люблю таблицы или использую её повсюду, нет, просто я иногда жертвую семантикой ради красоты и цели, приходится знаете-ли... Я пол-дня убил на то, что-бы сделать это меню списком, но потом понял, что этот вариант не прокатит (по крайней мере у меня), точнее добиться такого же эффекта списком не получиться..Потому-что задача диктует условия, которые под силу только таблице, или можно списком, но с небольшими косяками, а где-то и покрупнее..Так что если у вас найдётся время, посветите его этой задаче ради интереса, заодно и людей порадуете, потому-что все, кто верстал этот макет, верстали это меню именно Таблицей

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

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

А можно подробней про эмуляторы? На данном этаме у меня виртуалбокс с ХР, в нем я проверяю отображение в 6-м ие. Как бы и всё...