Оцените верстку странички

[vnuk]

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

http://aleksa-pavlyuk.narod.ru/index.html - верстка

http://aleksa-pavlyuk.narod.ru/maket.jpg - макет

Вопросы, которые возникли в ходе верстки макета:

1. Вопрос касательно высчитывания отступов у элементов типа h1-h6, <p>. К примеру, у меня есть <h3>Заголовок третьего уровня</h3> с font-size:50px. Мне необходимо сделать отступ моего заголовка от верха страницы в 20 пикселей (margin-top:20px), но при таком размере шрифта даже при нулевом значении margin имеется небольшой отступ от верха страницы, так как с увеличением размера шрифта увеличиваются отступы вокруг него. Единственное решение, которое я нашел - вручную подобрал отрицательное значение margin для h3, чтобы получить нулевой отступ, а затем из отступа, указанного в макете, отнял этот отрицательный отступ чтобы получить точное значение в 20 пикселей. Это единственное решение в данном случае? (Все отступы я предварительно обнулил в reset.css). Просто как то неудобно и нелогично высчитывать таким образом каждый отступ.

2. В макете в блоке перед футером есть заголовок Live Chat and Help. В макете насыщенность шрифта гораздо насыщеннее чем в браузере. Пробовал через font-weight подобрать необходимое значение, но так ничего из этого и не вышло. Как же все таки подобрать нужную насыщенность шрифта? На htmlbook.ru нашел "Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание. "

3. Может, глупый вопрос, но все же. Как все-таки правильно вычислять значение Line-height (межстрочный интервал текста)? В свойствах текста в фотошопе нашел значение интерлиньяж - пробовал ставить его, но оно тоже не всегда подходит. В ходе верстки макета я вычислял его на глаз. Есть ли какое-нибудь универсальное решение?

[logicface]

Я сам новичок и на счет отступов я пока что делаю так же как и вы, методом подбора, по этому этот вопрос тоже очень интересен, особенно как происходит маргин и паддинг с верху ко дну текста или к крыше текста.=D На счет насыщенности текста таже ситуация либо нормал либо болд, остальное не воспринимается. На счет Line-height, я когда делаю макет в фотошопе прописываю его шрифту, так как мне надо и потом просто делаю тоже самое в css, все работает.

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

Так же кнопки Get started, more sarvice сделаны не правильно, они тоже не относятся к контенту по этому не должны быть изображениями, текст внутри них должен быть текстом, так как если отключить картинки то вместо них будет пустота, не правильно сделано лого, его можно легко сделать текстом а не картинкой, при отключении картинок там пустота.

Не правильно сделано верхнее меню, при отключении стилей белый текст сливаеться с фоном, дайте меню bg-color или зйдайте для body bg-color красного цвета.

У тетки с ноутом нету паддинга или маргина слева, если заменить ее на черный квадрат она наплывает на текст.

Вместо id лучше использовать class у многих элеменов.

+ Еще 8 ошибок в валидаторе.

Валидатор

Edited November 9, 2012 by logicface

[FEL]

2logicface

Кто-то еще отключает картинки? Даже я со своим GPRS интернетом 64кб/с не отключаю

с хорошо оптимизированными картинками сайт грузится нормально.

[logicface]

Я не говорю что я их отключаю, просто в книге которую я читаю говорится, что хорошо, когда сайт выглядит правильно и у него понятен интерфес даже с отключенными картинками.=)

[pismenny]

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

Часто бывает, что на тёмной картинке светлый текст, и если картинки нет, а фон белый - прочитать ничего нельзя. Только с Ctrl+A.

Поэтому стараюсь это учесть.

Также отключаю css-файл и смотрю можно ли прочитать сайт на чистом html.

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