Мой первый PSD макет

LXVDXXXVI · August 11, 2012

Здравствуйте сегодня я сверстал свой 1 макет из psd за 4 часа(примерно).

Так вот я жду от вас критику, как бы вы сделали его, что мне нужно подучить, какие сайты или книги почитать?

Вот тут макет :blush:

Edited August 11, 2012 by LXVDXXXVI

wildhind · August 11, 2012

ну что сказать…

только по поводу вёрстки?

После грубейшей ошибки в первой же строке кода имеет ли смысл читать этот код дальше?

SelenIT · August 11, 2012

Ну почему грубейшей? Формально-то всё валидненько . Другой вопрос — к чему там столько <pre>: вроде, ни примерами кода, ни ASCII-артом там особо не пахнет...

LXVDXXXVI · August 11, 2012

ну что сказать…
только по поводу вёрстки?
После грубейшей ошибки в первой же строке кода имеет ли смысл читать этот код дальше?

Какой ошибки в доктайпе что ли?

Ну почему грубейшей? Формально-то всё валидненько . Другой вопрос — к чему там столько <pre>: вроде, ни примерами кода, ни ASCII-артом там особо не пахнет...

Здравствуйте да я просто чета думал сначала p но потом решил pre

Ну почему грубейшей? Формально-то всё валидненько .

А что там за ошибка???

ceil100 · August 11, 2012

В пятой строке, тег закрой

LXVDXXXVI · August 11, 2012

В пятой строке, тег закрой

Точно как же я так спс!

ceil100 · August 11, 2012

Как используется тег <pre>

SelenIT · August 11, 2012

А что там за ошибка???

Страница отдается с типом контента text/html, т.е. разбираться браузерами будет по HTML-правилам (новыми браузерами — по HTML5-правилам). В этом режиме от XHTML-доктайпа нет никаких выгод, а вот ограничения Strict-версии (если всё-таки стремиться к валидности) сильно осложняют жизнь. Поэтому реалистичный валидатор (см. ссылку в прошлом посте) подчеркивает этот доктайп как устаревший.

ceil100 · August 11, 2012

Картинка очень тяжелая, страница долго грузится

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

SelenIT · August 11, 2012

В пятой строке, тег закрой

Самозакрытие тегов работает только в XML. В данном случае им не пахнет.

P.S. Что-то у меня вообще страничка грузиться перестала

ceil100 · August 11, 2012

Много лишнего кода

Доктайп можно упростить

LXVDXXXVI · August 11, 2012

ceil100 (11 Август 2012 - 11:33) писал:
В пятой строке, тег закрой
Самозакрытие тегов работает только в XML. В данном случае им не пахнет.
P.S. Что-то у меня вообще страничка грузиться перестала

Сейчас я перелью погодите ок??

Много лишнего кода
Доктайп можно упростить

А как???

CalvinKlein · August 11, 2012

а отступ 25% это так задумано?

или всё-таки блок должен быть по центру?

Edited August 11, 2012 by CalvinKlein

LXVDXXXVI · August 11, 2012

а отступ 25% это так задумано?
или всё-таки блок должен быть по центру?
Сообщение отредактировал CalvinKlein: Сегодня, 11:59

По центру ну это margin auto да?))

CalvinKlein · August 11, 2012

да margin:auto

ну или можно так


{
  position:absolute;
  left:50%;
  margin-left:-400px; /* половина ширины */
  width:800px;
}

Edited August 11, 2012 by CalvinKlein

LXVDXXXVI · August 11, 2012

да margin:auto
ну или можно так
{
position:absolute;
left:50%;
margin-left:-400px; /* половина ширины */
width:800px;
}
Сообщение отредактировал CalvinKlein: Сегодня, 12:04

Спасиб а насчет доктайпа не посоветуете?

wildhind · August 11, 2012

Много лишнего кода
Доктайп можно упростить
А как???

Элементарно.

Меняем вот эту громоздкую и ненужную конструкцию: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

на нормальную: <!DOCTYPE html>

Затем думаем о правильности использования элементов (в частности <pre>, где больше смысла сделать <p> или <article>, <ul>, где нужно <nav> и т.д.)

Затем думаем, что не так с множеством пустых элементов.

Затем думаем об избыточной перегруженности классами.

Ну и вообще думаем.

Вот такую конструкцию:


<ul class="menu">
<li class="home"><a class="home" href="#"></a></li>
<li class="about"><a class="about" href="#"></a></li>
<li class="b2b"><a class="b2b" href="#"></a></li>
<li class="industry"><a class="industry" href="#"></a></li>
<li class="service"><a class="service" href="#"></a></li>
<li class="contact"><a class="contact" href="#"></a></li>
<li class="support"><a class="support" href="#"></a></li>
<li class="jobs"><a class="jobs" href="#"></a></li>
</ul>

гораздо лучше записать так:


<nav class="mainmenu">
<a href="#!/">Home</a>
<a href="#!/about">About</a>
<a href="#!/b2b">B2B</a>
<a href="#!/industry">Industry</a>
<a href="#!/service">Service</a>
<a href="#!/contact">Contact</a>
<a href="#!/support">Support</a>
<a href="#!/jobs">Jobs</a>
</nav>

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

CalvinKlein · August 11, 2012

и ещё там где у вас свойство background body

оставьте только

background: url("http://lxvdxxxvi.hak.su/images/background.gif")

потому что с вашим background-size фон масштабируется, что ужасно смотрится

Edited August 11, 2012 by CalvinKlein

LXVDXXXVI · August 11, 2012

LXVDXXXVI (11 Август 2012 - 11:53) писал:
ceil100 сказал:
Много лишнего кода
Доктайп можно упростить
А как???
Элементарно.
Меняем вот эту громоздкую и ненужную конструкцию: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
на нормальную: <!DOCTYPE html>
Затем думаем о правильности использования элементов (в частности <pre>, где больше смысла сделать <p> или <article>, <ul>, где нужно <nav> и т.д.)
Затем думаем, что не так с множеством пустых элементов.
Затем думаем об избыточной перегруженности классами.
Ну и вообще думаем.
Вот такую конструкцию:
<ul class="menu">
<li class="home"><a class="home" href="#"></a></li>
<li class="about"><a class="about" href="#"></a></li>
<li class="b2b"><a class="b2b" href="#"></a></li>
<li class="industry"><a class="industry" href="#"></a></li>
<li class="service"><a class="service" href="#"></a></li>
<li class="contact"><a class="contact" href="#"></a></li>
<li class="support"><a class="support" href="#"></a></li>
<li class="jobs"><a class="jobs" href="#"></a></li>
</ul>
гораздо лучше записать так:
<nav class="mainmenu">
<a href="#!/">Home</a>
<a href="#!/about">About</a>
<a href="#!/b2b">B2B</a>
<a href="#!/industry">Industry</a>
<a href="#!/service">Service</a>
<a href="#!/contact">Contact</a>
<a href="#!/support">Support</a>
<a href="#!/jobs">Jobs</a>
</nav>
и так можно практически по всему коду менять

Спасибо блин мне еше учить и учить :facepalmxd:

Ша все изменю проверите ок?

SelenIT · August 11, 2012

с вашим background-size фон масштабируется, что ужасно смотрится

Не согласен, масштабирование фона — не баг, а фича, без него будет совсем не так, как-то «куце». Другое дело, что выбор gif-формата для картинки с кучей градиентов — как-то действительно не комильфо. Я бы попробовал jpeg.

CalvinKlein · August 11, 2012

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

и кстати про формат ценное замечание

у вас фон 767кб весит

Edited August 11, 2012 by CalvinKlein

wildhind · August 11, 2012

Спасибо блин мне еше учить и учить

это нормально

хотя нет. Это ещё цветочки.

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

В общем, всё нормально Учиться — это хорошо.

LXVDXXXVI · August 11, 2012

Посоветуйте еше что нибудь :rolleyes:

ну ладно пусть будет масштабируемый фон, тогда его лучше сделать без стыков по вертикали
и кстати про формат ценное замечание
у вас фон 767кб весит
Сообщение отредактировал CalvinKlein: Сегодня, 12:16

Ага я уже в jpg перелил щас 65кб весит

LXVDXXXVI (11 Август 2012 - 12:09) писал:
Спасибо блин мне еше учить и учить
это нормально
хотя нет. Это ещё цветочки.
А вот когда уже имеешь некоторые знания и некоторый опыт, участвуешь в миллионных проектах в статусе незаменимого специалиста, начинаешь понимать, что учить-то ещё намного больше, чем было в самом начале пути. А потом даже не просто учиться, а изобретать и придумывать что-то, доселе считавшееся невозможным.
В общем, всё нормально Учиться — это хорошо.

А вы не посоветуете где можно поискать полезный матерьял? (ну к примеру как создавать разные элементы веб-страницы)

wildhind · August 11, 2012

Для начала можно на этом сайте много интересного читать.

А затем — да само найдётся.

css-live тоже растёт над собой, всё более и более интересные материалы там появляются. Уж на что у меня было изначально скептическое отношение к этому проекту, а по факту пришлось отношение поменять. Материалы без лишнего заумства, делающие сложные темы простыми.

Да вообще, читайте всё. Где хорошие материалы, а где не очень — быстро станет понятно.

LXVDXXXVI · August 11, 2012

Для начала можно на этом сайте много интересного читать.
А затем — да само найдётся.
css-live тоже растёт над собой, всё более и более интересные материалы там появляются. Уж на что у меня было изначально скептическое отношение к этому проекту, а по факту пришлось отношение поменять. Материалы без лишнего заумства, делающие сложные темы простыми.
Да вообще, читайте всё. Где хорошие материалы, а где не очень — быстро станет понятно.

Спасибо вам огромное!!!

Ну я тут поменял что скажите :rolleyes:

Sign In

Мой первый PSD макет

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information