Первая законченная верстка.

[Red Planet]

Здравствуйте, сверстал свою первую страничку и разместил.

В процессе создания использовались средства HTML и CSS, также java-скрипт для Internet Explorer 6 (для адекватного отображения прозрачности в png).

Проверял на браузерах:

• Mozilla Firefox 3.6.10
  
• Opera 10.62
  
• Internet Explorer 8
  
• Google Chrome 6.0.472.63
  
• Mozilla Firefox 2.0.0.17 (Portable)
  
• Opera 9.63 (portable)
  
• Internet Explorer 6 (portable)
  

Меня интересует:

1. Работают ли как положено скрипты для IE 6 на других сборках?
   
2. Качество верстки в общем.
   
3. Отображение на разных экранах (имел возможность проверить только лишь на ноутбуке (1366*768) и на настольном (1280*1024).
   

Верстка

Макет

Жду комментариев, критики, пожеланий.

Edited November 4, 2010 by Red Planet

[vvsh]

Отображение на разных экранах (имел возможность проверить только лишь на ноутбуке (1366*768) и на настольном (1280*1024).

1024x600 - не влезает в экран.

[Red Planet]

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

[CEBEP]

Два считающихся наиболее объективными метода оценки качества вёрстки считается кроссбраузерность и валидность, есть ещё разговоры о лаконичности кода и о его читаемости но как правило чем лаконичнее тем менее читаемо так что тут говорить об общих критериях сложнее. Так вот, вашу страничку мощно ругает валидатор в следующих выражениях. Это вызвано в основном выбором типа документа, но тем не менее не круто.

[LunatiK]

по вёрстке:

Вобщем-то всё аккуратно - это плюс.

минусы:

1. Строчным элементом блочные не оборачивают:

				<ul>
					<strong>
						<li><a href="#">Home</a></li>
						<li><a href="#">Portfolio</a></li>
						<li><a href="#">Services</a></li>
						<li><a href="#">Contact</a></li>
					</strong>
				</ul>

Если стронг для Сео то оборачивайте каждый текст, хотя это всё равно сомнительно, если нет то задавайте свойства через ксс

2. Слишком много id для дивов и мало классов, складывается ощущение что вы для себя так и не определили где что нужно использовать.

3. не структурированный css

P.S. Ну и да, послушайтесь CEBEP исправляйте ошибки валидатора. Ну и Верстайте уже с доктайпом STRICT

[mishka]

Отображение на разных экранах (имел возможность проверить только лишь на ноутбуке (1366*768) и на настольном (1280*1024).

А сузить экран до 1000 какието силы не позволяют?

1366 - вполне достаточное разрешение дисплея для тестирования резины.

[psywalker]

Вёрстка хреновая. Рассказываю.

1) Минималку можно было сделать любую, сам бы тормазнул, благо макет позволяет. Зачем ты её вообще ставил, а тем более min-width:1200px, я вообще не знаю.

2) У главного контейнера #wrapper высота прописана, слава богу, что ещё overflow: hidden; не влепил. Зачем она там?

3) <div id="top-brown-bar"> - Вот этот див зачем нужен? Вполне можно было этот фон повесить на боди.

4) С логотипом смешно получилось. Ссылка без релатива, абсолюта и прочего, а контейнер картинка абсолют) От чего пляшем?

5) Верхнее меню как "принято" обёрнуто в <div id="menu">. Зачем кстати?

6) В само меню сразу в тег UL вставлен тег Strong, чуешь подвох?

7) Ссылки в меню обёрнуты в Strong, зачем? Что помешало просто в ссылках сделать текст жирным?

8) Далее вот в этом диве непонятка вообще творится <div id="top-grey-bar">. Всё в картинках, стрелки, которые должны быть кликабельные - некликабельные. Далее всё на абсолюте и т.д. Видно, что был выбран тупо способ, без обдумывания правильных вариантов. И естественно был выбран абсолют). Вот кстати заметил интересную вещь

circle {
left:194px;
margin-top:-22px;

Зачем отступ у абсолюта сделан отриц. марджином?)) а про top; забыл?

9) Центр интересно сделан. Тоже на абсолюте правая колонка, супер) Никогда так больше не делай. Делай по принципу "Двух-колоночный макет", в инете их полно.

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

10) В футере тег <address>, где внутри хоть что-то напоминающее адрес и т.п?

Это только на вскидку, на самом деле ошибок гораздо больше.

Много лишних элементов, куча тяжёлой артилерии по типу абсолюта, совершенно ненужной. Всё в ID и Дивах.

По 10-и бальной шкале поставил-бы 1, ну 2 максимум. Совет, набрать побольше критики, всё взвесить, обдумать и переверстать всё заново.

[CEBEP]

какой нафиг 1-2?! 4 из 10! у человека всё адекватно работает. Если б не огромная минимальная ширина - 6 из 10!

[psywalker]

у человека всё адекватно работает.

Уверен?

какой нафиг 1-2?! 4 из 10!

У каждого свои критерии дружище

[CEBEP]

Вообще не понимаю как можно критиковать человека за громоздкость кода? Пока не установлена диктатура больного заказчика человек должен писать в соответствии с требованиями стандартов и чтобы работало. То что что-то там разнесено, лишний раз обёрнуто... Так и что? давайте теперь придумаем писать предельно лаконично, например не переходить на новые строки! Человек пишет как ему хочется... захочет - будет вообще в каждом классе только один параметр определять и всё вложенными тегами делать - ему так удобнее например. Я его не осужу до тех пор пока его код грузится меньше чем за 3 секунды

[sigma77]

Вообще не понимаю как можно критиковать человека за громоздкость кода? Пока не установлена диктатура больного заказчика человек должен писать в соответствии с требованиями стандартов и чтобы работало. То что что-то там разнесено, лишний раз обёрнуто... Так и что? давайте теперь придумаем писать предельно лаконично, например не переходить на новые строки! Человек пишет как ему хочется... захочет - будет вообще в каждом классе только один параметр определять и всё вложенными тегами делать - ему так удобнее например. Я его не осужу до тех пор пока его код грузится меньше чем за 3 секунды

Чем больше лишних элементов и классов, тем сложнее обслуживание кода. Лишний элемент тут, лишний там, тут мы отдельный класс пропишем, тут вместо CSS используем лишний тег или, наоборот, там где можно было бы обойтись просто обычной разметкой - навешаем классов и стилей - в итоге код обрастает так, что без 100 грамм фиг разберешься, да и с ними бывает черт ногу сломает. Плюс неграмотная организация кода и бездумное применение стилей, как правило порождает ошибки, которые имеют свойство накапливаться. Куча оберточных дивов, таблицы в таблицах - всё это как раз и противоречит идеологии W3C, если не самим спецификациям. Заказчику то как раз и пофиг. Не пофиг тем, кто будет потом работать с этим кодом.

[psywalker]

Вообще не понимаю как можно критиковать человека за громоздкость кода?

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

с требованиями стандартов и чтобы работало

Хочу тебя огорчить, не все браузеры одинаково поддерживают стандарты, а кто-то и подавно плохо.

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

давайте теперь придумаем писать предельно лаконично, например не переходить на новые строки!

Дерзай, возможно ты достигнешь в этом успеха.

Человек пишет как ему хочется... захочет - будет вообще в каждом классе только один параметр определять и всё вложенными тегами делать - ему так удобнее например.

Без проблем, его трудности, я не против.

Я его не осужу до тех пор пока его код грузится меньше чем за 3 секунды

Не суди и судим не будешь)

[CEBEP]

Уверен?

У каждого свои критерии дружище

Я как ананимус залез на сайт, у меня ничто некуда не налезло, я всё что хотел прочитал, я даже открыл в фаерфоксе, осле, хроме и опере и везде всё было одинаково. Да сайт нерезиновый - -2 балла, если считать то что ещё и очень большое начальное разрешение то -4, и очень сильно невалидно это ещё -2...

[psywalker]

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

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

[sigma77]

Я как ананимус залез на сайт, у меня ничто некуда не налезло, я всё что хотел прочитал, я даже открыл в фаерфоксе, осле, хроме и опере и везде всё было одинаково. Да сайт нерезиновый - -2 балла, если считать то что ещё и очень большое начальное разрешение то -4, и очень сильно невалидно это ещё -2...

10 - 2 - 4 - 2 = 2... не?

[CEBEP]

Я не спорю что лишний код это плохо но пока это работает человек в праве рассчитывать на >5, у него не работает на маленьких мониторах, в свете нетбуков(пояснение топстартеру) это очень плохо поэтому 5 из 10 сайт не заслуживает. НО САЙТ НОРМАЛЬНЫЙ! у него нет ничего сумасшедшего, сайт работоспособен, так что 0 тоже не подходит. 1-2 это случае когда вверху написано "Используйте IE" и всё в таблицах...

хм... действительно 2))) ну хз... тогда я оценивал из 12... просто плохо за такой сайт меньше 3)))

[psywalker]

CEBEP

Я не спорю что лишний код это плохо

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

Я поставил 1-2 балла за то, что человек старался. Больше ставить к сожалению не за что.

[CEBEP]

я думаю тут как раз недостатки из-за того что не особо старался, но в этом случае есть результат... кстати по моему самое классное - затролить за необоснованное использование png в плане и избыточности кода и объёма страницы в целом а то что программист не разобрался в css - он быстро сам поймёт и во всём разберётся. Всем ясно что его метод обращения к жирному начертанию странный, и даже более...

Edited October 8, 2010 by CEBEP

[psywalker]

что не особо старался

Нет, ты снова не прав. Как раз таки тут видно, что человек старался, но в силу своей неопытности получилось то, что получилось. Видно, что он сделал по максимуму своих знаний. Человек только начал свой путь верстальщика и познаёт это ремесло. Если будет стараться, слушать критику, исправлять ошибки и т.д., то через 10 работ мы уже увидим неплохие результаты, я уверен.

[sigma77]

Я не спорю что лишний код это плохо но пока это работает человек в праве рассчитывать на >5, у него не работает на маленьких мониторах, в свете нетбуков(пояснение топстартеру) это очень плохо поэтому 5 из 10 сайт не заслуживает. НО САЙТ НОРМАЛЬНЫЙ! у него нет ничего сумасшедшего, сайт работоспособен, так что 0 тоже не подходит. 1-2 это случае когда вверху написано "Используйте IE" и всё в таблицах...

А ты попробуй подобавлять/поубирать контент. Сайт по-прежнему работоспособен?

[psywalker]

А ты попробуй подобавлять/поубирать контент. Сайт по-прежнему работоспособен?

Дело не только в этом, всё это абсолютно лишние действия. Мне не нужно было далеко ходить, достаточно было взглянуть на это

#wrapper {
height:1200px;

и всё, тут уже ставиться точка.

[sigma77]

psywalker,

Ну так это было и не тебе сказано, а к тому что и так сайт нормально смотрится. Да нормально, пока не начнуться какие-либо манипуляции с сайтом.

Ну задание высоты, это по неоности. А так, я с тобой и не спорю

[psywalker]

psywalker,

Ну так это было и не тебе сказано

И не тебе отвечено

[Red Planet]

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

1. Строчным элементом блочные не оборачивают:
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
   </ul>

   Не понимаю. В блочный <ul> завернуты строчные <li>. Что здесь плохого? Есть способ лучше сделать элементы списка не в столбик, а в строчку?
   

2. Слишком много id для дивов и мало классов, складывается ощущение что вы для себя так и не определили где что нужно использовать.

   А как поступать, если нет таких блоков, у которых бы полностью повторялись все свойства?
   

Edited October 10, 2010 by Red Planet

[psywalker]

Даже и не ожидал, что будут такие баталии. Огромное спасибо за замечания и критику, я переделаю те моменты, на которые мне было указано.

Ты главное не просто переделывай, а думай перед каждым нажатием клавиши)

1)

Строчным элементом блочные не оборачивают:

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

Нет, тут всё правильно.

2)

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

А как поступать, если нет таких блоков, у которых бы полностью повторялись все свойства?

Некоторые элементы всё равно могут повторяться. Я бы например задал ID только главным блокам, шапке, контенту и подвалу. Остальным классы.