Kronus

Лучше исходить не из понятия "попроще", а из того, чему ты хочешь научиться. То, что ты уже умеешь не имеет смысла просто так делать. Вводи free psd в поисковик и выбирай макеты, в которых ты видишь что-то сложное для себя (фон, нестандартные тени и т.д.).

Хотя если уж СОВСЕМ ничего не верстал ни разу, то бери понравившийся лендинг. Он сам по себе прост и достаточно популярен в плане заказов.

Горизонтальное верхнее меню. При hover на левые элементы они изменяют размер и правые немного сползают в сторону.

На мой взгляд слишком много идентификаторов. Можно несколько вполне спокойно заменить на классы.

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

Я обычно верстку в Firefox вначале тестирую, там по умолчанию есть инструмент для изменения размера окна.

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

Посмотри старые темы раздела, там буквально те же самые проблемы уже 10-ки раз разжевывались.

Стараюсь мониторить по мере возможности, но в основном тут фиксированная верстка с лендингами встречается.

Просьба оценить стиль и качество верстки http://prk-variant.ru/plane. Макет лежит здесь http://prk-variant.ru/plane/spit.psd

Заранее спасибо.

Без хорошего JS-пинка типа html5shim

Во-во! У меня эта верстка в 8 осле тоже шаталась, пришлось прикручивать костыли. В общем, лишняя нагрузка в десятки килобайт кода только ради одного браузера. Впрочем, если заказчик так захочет, то пусть будет, его дело.

Я смотрел твои работы, не думаю, что будет сложно. У тебя самописные скрипты на js, а я вообще его не знаю, только jquery, да и то постольку-поскольку. Там только стили изменить и инструкцию по настройке прочитать.

Видимо). Интересно, как это делается?

http://www.xiper.net/collect/js-plugins/ui/jscrollpane2.html хотя может и лучше что есть, просто первое, что тогда нагуглил. Но у него большие проблемы с горизонтальным скроллом.

Моя критика как новичка может будет выглядеть глупо, но все же. С фоном действительно что-то не то, у меня при широком формате по бокам темные линии, похоже это из-за второго фона (видимо, подсветка) в body. Я, кстати, тоже сначала фон одной картинкой сделал, но мне сказали при оценке, что так нежелательно. В итоге сделал свечение через прозрачный слой, а он даже больше той обычной фоновой весил в два раза. В общем дилемма, между красотой кода и скоростью загрузки.

И я один что ли делал боковой дизайнерский скролл?

Больше года выращиваю несколько блогов для seo-экспериментов. За все время сломали только один, понаделав кучу сторонних ссылок на главной.

Все эти плагины для "защиты" вряд ли защитят, только нагрузка лишняя.

Вот тебе новичок задание - прикрутить виджет комментариев вконтакте, а не вставить его картинкой. ).

Ок, попробую. Не знал, что это обязательно, думал заказчик сам делает.

http://vk.com/dev/sites вот подсказка!_)

Спасибо

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

Проверки на ссылки - есть ли в письме текст вида "https://". Когда я работал с программистом, он часто на формы заказа прикручивал то, что я говорил (те же ссылки в письме или большой объем - 99% вероятность, что спам). Да и к нам когда на фирму заказы поступали и на форме у нас не стояло все это, то каждое утро приходилось чистить почту от 3-5 писем спама.

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

Зачем блоку leftBlock и rightBlock установлена фиксир. высота:?а если добавится контент:?

В теме, где я брал макет http://htmlforum.ru/index.php?showtopic=29381, заказчик тоже просил фиксированную высоту и ширину сделать. Что мне кажется логичным, ведь у правого блока высота вряд ли будет меняться, там даже внизу социальные кнопки зафиксированы. Хотя может я и ошибаюсь.

Там скорее всего просто нужно ограничение на контент ставить, с фиксированной высотой.

Ограничение это как? hiden для инфы о фильме?

В форме валидация входных данных стоит (javascript).

Далеко не все поставят капчу, проверку на ссылки или тот же substr для сообщений, чтобы простыни текста не приходили. Вот вы умеется, а больше половины верстальщиков точно не осилят. Я php вообще на уровне плинтуса знаю, не решился бы писать даже простенький скрипт.

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

Согласен с вышесказанным. На биржах фриланса все очень плохо. Там такие мамонты веба тусуются, что за любой адекватный заказ с друг другом будут толкаться, а новичков вообще затопчут и не заметят. В итоге новички нарвутся "срок сдачи вчера", не управившись за положенное время, либо будут возиться со сложным и дешевым макетом, который вообще не осилят. Вот тебе и дешевые задания, с которых толком опыта не получишь и больше нервов потратишь. Вообще, трудно даже какой-то вариант придумать, кроме того, что действительно тупо сверстать 5-10 макетов разной сложности чисто для опыта.

обязательна привязка php скриптов

Ох, неужели теперь и такое происходит? Понимаю еще js. Хочу посмотреть на счастливого заказчика, которому на почту или в отзывы будет как из рога изобилия валиться спам после php от верстальщика.

http://prk-variant.ru/222/ Теперь в 8 ie все нормально.

Не стал добавлять только второй дизайнерский шрифт, так как при конверте у меня почему-то везде часть некоторых букв "съедается". В остальном основное все доделано: микро-тень под шапкой, фон двумя слоями (метод подсмотрел у Zverushki, только ей не говорите), добавил/изменил тени.

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

Чуть позже исправлю остальные недочеты и перезалью.

Могу сказать одно: для двухмесячного новичка это огромный прорыв. Молодец! Есть куда расти

Надеюсь, это не сарказм, спасибо

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

Как-то выглядит слишком круто для первого раза. Но вообще я не могу понять, почему в 8м осле все расползается? boz-sizing не применялся, так почему на луну все улетело? Вот я тоже ее кстати верстала, если интересно.

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

У тебя кстати почти нормально все в 8 ие, разве что небольшие проблемы, вроде серых линий по бокам и т.д.

Ну в 1024 то и не влазит.

Точно, проклятый дизайнерский скролл на 10 пикселей недоглядел.

И зачем их было пихать в форму и делать инпутами?

По виду они были похожи на кнопки Хотя надо было, наверное, сделать ссылками.

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

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

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

Просьба оценить стиль и качество верстки. Макет взял отсюда: http://htmlforum.ru/index.php?showtopic=29381 .Подогнал под 1024px. Сам готовый вариант здесь http://prk-variant.ru/222

Заранее спасибо тем, кто решит покопаться в моей поделке

Решил попрактиковаться на макете, скоро выложу результат. Собственно, основная сложность действительно с тенями и фоном. Чтобы получалось как в макете, часто вместо обычного rgba с прозрачностью приходится вставлять фон картинкой.

Проблема обычно в том, что http://www.fontsquirrel.com иногда отказывается принимать платные шрифты. Но в целом это самый нормальный генератор.

Есть еще http://www.font2web.com платность шрифтов ему не помеха, но генерит хуже, одни буквы ниже других получаются.

сервис font-squirrel в режиме оптимизации генерит шрифты без кириллицы (а может лишь некоторые и тогда это баг).

Странно, обычно всегда нормально кириллицу выдавал. В режиме эксперта в Custom Subsetting выбирали нужный язык?

Можно еще выбрать более "тяжелые" варианты вместо обычных текстовых редакторов, например PhpStorm. Но согласен, большинству хватает тандема ST 2-3 и фотошоп.

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

Спасибо большое за советы! Указал всей таблице фон, вроде все нормально.

А вообще в наши дни такие заголовки можно (и, имхо, желательно) делать CSS-градиентами и border-radius'ами.

Заказчик решил доплатить за поддержку древних ie и я пошел по пути меньшего сопротивления.