Сверстанный макет

[skygazer]

Ну вот, наконец-то и я выкладываю тут свою верстку. Вот сам макет. Ну а тут моя работа.

Макет проверялся в лисе, хроме, опере, IE9. Прошу оценить качество кода, ну и вообще верстку в целом.

Edited February 8, 2012 by skygazer

[DStereo]

Ну вот, наконец-то и я выкладываю тут свою верстку. Вот сам макет. Ну а тут моя работа.

Макет проверялся в лисе, хроме, опере, IE9. Прошу оценить качество кода, ну и вообще верстку в целом.

В принципе код аккуратный. Только старайтесь не пользоваться таким количество id, особенно это касается колонок - col1, col2, col3 и т.д. Потому что таких колонок может быть много и они могут использоваться на странице несколько раз. Плюс очень много картинок, что можно было сделать и без них: кнопка формы поиска, можно было бы вставить специальный символ html, а саму кнопку залить фоном; разделители для главного меню, тоже можно было сделать через border для элементов li; картинка синего градиета 700 пикселей по ширине очень большая. Градиент можно сделать через linear-gradient, а для браузеров которые это не поддерживают, будет просто однотонный фон.

Edited February 8, 2012 by DStereo

[html232]

Скажу честно - код не смотрел, но смотрится хорошо!

[Vin]

Фон бы сделать более подходящим, а то серый к синему дизайну как-то совсем не подходит. Ну и ещё подогнать пункты верхнего меню, как и заголовки в меню слева: используй Pixel Perfect — прямо попиксельно не надо, но сейчас расхождение заметное. Код да, аккуратный, легкочитаемый, но имеются ошибки — валидатор ругается.

[lexxcode]

Страница не влазит в 17" т.е. в 1000px, хотя по дизайну, ее можно легко уместить.

Есть не соответствия с макетом, особенно меню бросается в глаза.

По коду не плохо, но например стили картинок к постам, можно было смело настроить через css, а не писать инлайн.

[cyklop77]

не знаю важно ли, но в линуксовых опере и фоксе последних версий многое съехало

[paracelso]

Текст не тот, отступы совершенно другие, всё, где есть контент, выполнено не так, как на макете.

А главное - он не резиновый, точнее даже, сделан попиксельно. Фон, например, у меня серый, т.к. ширина экрана 1280. По мне так совсем не ок.

[skygazer]

В принципе код аккуратный. Только старайтесь не пользоваться таким количество id, особенно это касается колонок - col1, col2, col3 и т.д. Потому что таких колонок может быть много и они могут использоваться на странице несколько раз. Плюс очень много картинок, что можно было сделать и без них: кнопка формы поиска, можно было бы вставить специальный символ html, а саму кнопку залить фоном; разделители для главного меню, тоже можно было сделать через border для элементов li; картинка синего градиета 700 пикселей по ширине очень большая. Градиент можно сделать через linear-gradient, а для браузеров которые это не поддерживают, будет просто однотонный фон.

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

Если бы было много похожих слоев, сделал бы классами. Насчет картинок- делаю как удобно. Пользователю все равно в принципе как я сделал, результат-то налицо. Это в целях скорости загрузки страницы и экономии траффика? Да, об этом не думал, признаюсь, никак не думал что верстаю для людей с dial-up. В принципе если это действительно нужно - сделаю.

Фон бы сделать более подходящим, а то серый к синему дизайну как-то совсем не подходит. Ну и ещё подогнать пункты верхнего меню, как и заголовки в меню слева: используй Pixel Perfect — прямо попиксельно не надо, но сейчас расхождение заметное. Код да, аккуратный, легкочитаемый, но имеются ошибки — валидатор ругается.

Ну фон это я для себя - а мне норм. Глаз не режет, вполне приятно. Я не дизайнер, что поделать.

Верхнее меню - да, не уследил. Глаз замыливается, когда долгое время смотришь на макет, устаю. Насчет ошибок не знаю, проверял плагином-валидатором, ну alt не установил, и считаю что он в тех случаях не нужен.

Страница не влазит в 17" т.е. в 1000px, хотя по дизайну, ее можно легко уместить.

Есть не соответствия с макетом, особенно меню бросается в глаза.

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

не знаю важно ли, но в линуксовых опере и фоксе последних версий многое съехало

Линупс не стоит, что поделать. Интересно, как с этим справляются верстальщики, или еще отдельно под линукс страницы допиливают? Ужас

Текст не тот, отступы совершенно другие, всё, где есть контент, выполнено не так, как на макете.

А главное - он не резиновый, точнее даже, сделан попиксельно. Фон, например, у меня серый, т.к. ширина экрана 1280. По мне так совсем не ок.

Ну как же, я ручками текст набираю - вы только вчитайтесь повнимательней! Или это вы относительно размера шрифтов? Сто раз смотрел на макет, я жутко мнительный - да вроде бы все так. Насчет меню писал выше.

Он не резиновый, потому что он и не должен быть резиновым. Сделан попиксельно - так это ж плюс! И фон так и задуман, на самом деле, у меня тоже ширина 1280, и все в порядке. Мне кажется вы хотите придраться к тому, что было мной задумано, как к недоделке.

Edited February 8, 2012 by skygazer

[klierik]

1. Извени за искренность, но это - говнокод! Для начала- туту должны быть классы а не инлайн стили. Потом это лучше организовать списком. И <br /> целесообразно использовать только в рамках контентных данных (в 99% случаев)

<div id="col4">
			<div class="head3"><span style="color:#a20000">Aliquam</span> tempus etiam</div>
			<img style="float:left; margin:44px 30px 0 8px" src="img/homepage06.jpg">
			<p class="text1" style="margin-top:44px"><span class="bold">Fusce nec eros augue</span> hendrerit erat. 
			Nam dapibus lorem ipsum dolor et suscipit semper. Lorem amet sed consequat.</p>


			<img style="float:left; clear:left; margin:34px 30px 0 8px" src="img/homepage07.jpg">
			<p class="text1" style="margin-top:44px"><span class="bold">Blandit sed amet</span> hendrerit erat. 
			Lorem ipsum sed consequat suscipit et semper. Lorem amet sed consequat.</p>

			<img style="clear:left; float:left; margin:34px 30px 20px 8px" src="img/homepage08.jpg">
			<p class="text1" style="margin-top:44px"><span class="bold">Veroeros nullam</span> lorem ipsum dolore sit amet semper. Turpis mauris convallis etiam.</p>
			<div class="head3" style="clear:left"><span style="color:#a20000">Blandit</span> lorem et dolor</div>

			<p class="text1" style="margin-top:43px">Sed fermentum dui bibendum tempus, est orci iaculis dolor vel gravida varius, facilisis mauris turpis ac mauris.
			Etiam elementum odio ac erat convallis.</p>

			<p class="text1" style="margin-top:22px"><a href="#">Aenean lorem tellus sed lorem etiam nulla</a>
			<br><a href="#">Bibendum sed justo erat neque dolore icaulis</a>
			<br><a href="#">Euismod sit amet et ante consequat etiam</a>
			<br><a href="#">Lorem ipsum dolor sit amet veroeros</a></p>


		</div>

2. когда увидел что макет имеет фикс. высоту, далее смотреть не стал.

незачот!

[Vin]

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

У меня есть макет-исходник, но сейчас глянуть не могу. Скорее всего, ширина контента в макете меньше 1000px и с головой влазит в 1024px. Возможно, я ошибаюсь, но в таком случае можно просто уменьшить размер исходника. Тянуть все элементы сложновато, но можно делать ширину основного содержимого фиксированной, а фоны тянуть — именно поэтому общая ширина макета часто намного превышает 960px.

Edited February 8, 2012 by Vin

[skygazer]

Извени за искренность, но это - говнокод

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

Макет фиксированный - как мне его тянуть? Критика это конечно хорошо, но я ж новичек, обьясните как сделать правильно.

ширина контента в макете

ширина страницы - 1200 пикселей.

Edited February 8, 2012 by skygazer

[klierik]

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

не исполльзуй в разметке style="", используй классы.

Макет фиксированный - как мне его тянуть? Критика это конечно хорошо, но я ж новичек, обьясните как сделать правильно.

возьми на заметку - по высоте макеты не фиксированны в 99% случаем, если это не промо сайт или заведомо обусловлено дизайнером.

В данном случае он по высоте должен тянутся.

[DStereo]

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

Если бы было много похожих слоев, сделал бы классами. Насчет картинок- делаю как удобно. Пользователю все равно в принципе как я сделал, результат-то налицо. Это в целях скорости загрузки страницы и экономии траффика? Да, об этом не думал, признаюсь, никак не думал что верстаю для людей с dial-up. В принципе если это действительно нужно - сделаю.

Понятно, что для одной страницы может быть только определенное количество колонок, а потом начнете верстать макеты состоящие из большого количества страниц, где будут повторяться и колонки и другие блоки. Но лучше отходить от использования id для оформления через css, а пользоваться классами, они более гибкие. id можно использовать либо для совсем основных блоков, типа #header, #content, #footer, которые не меняются от страницы к странице, либо для javascript. По поводу dial-up, тут дело даже не в самом нем. Люди привыкли чтобы сайты грузились быстро, а каждая картинка - это дополнительный запрос на сервер, соответственно время, так же вы не учитываете, что количество пользователей мобильными устройствами растет, а интернет там пока еще не достиг тех скоростей, как через кабель или adsl, соответственно мобильный интернет пока еще на уровне dial-up, может быть чуть быстрее.

[skygazer]

Переделал код, поправил меню. Меня от этого макета уже подташнивает, в следующий раз буду делать сразу начисто

[klierik]

а соклько ты его делаешь то?

хмъ, интересно что бы ты сказал если бы делал один проект эт так месяцев 6

[Vin]

ширина страницы - 1200 пикселей.

Ширина блока контента там 1003px — да, это косяк дизайнера, но в 1024 влезает с небольшим горизонтальным скроллом. Остальное — фон, задаём в body.

Т.е. примерно так:

/*Это для фона */
body {
    width: 100%;
    min-width: 1003px;
    }

/* А в этом блоке мы держим всё содержимое */
#wrapper {
    width: 1003px;
    }

Edited February 10, 2012 by Vin