Jump to content

Макет от Softlink


psywalker
 Share

Recommended Posts

Привет, народ, верстальщики в частности :) Для вас имеется хорошая новость. У нашего постоянного посетителя Softlink-а появился отличный макет для вёрстки, который он любезно нам предоставил B)

Скачать

Макет

2011-09-15_1802.png

Скачать

Задание опишет сам автор макета, т.е. Softlink. Удачи!

  • Like 1
Link to comment
Share on other sites

Привет, други!

Как поставил мне задачу заказчик.

Все фикс. Абсолютно все блоки фиксированной шириной и длиной.

Справа белые кнопки - ссылки.

Блок под хедером - тоже со ссылками(двумя, картинка и текст).

В описании фильма есть оценки - 6.0 и 6.1. Т.е. слева от них блок к которому они относятся.

Слайдер листает сразу по 5 фотографий. Обратите внимание на "ухи" слайдера - они одного фона с блоком.

Скролл-бар справа от комментариев я не верстал, т.к. отпала необходимость у заказчика, но для тренировки можете сверстать :)

В футере стрелочки - это якорь наверх.

Еще есть один маленький косячок. Дизайнер немного на рассчитал размер и сделал мин. ширину в 1055пк. В общем смотрите сами, но я все подогнал под 1024 без скролла.

p.s. так как все фикс, то можно вставлять блоки прямо картинками, но так не интересно, так что юзайте css3 :)И будьте внимательны к детальками :)

p.p.s. в портфолио размещать работу не рекомендуется, т.к. это будет реальный сайт(ну заказчик попросил).

  • Like 4
Link to comment
Share on other sites

Softlink, спасибо :)

На здоровье) Макет и правда мне показался интересным. С виду простенький, однако вот этот полупрозрачный фон у блоков не дает расслабиться :) Ну если верстать не картинками конечно) Еще забыл добавить, что фотографии в слайдере должны разворачиваться. В общем, кому как угодно, так и делайте, я описал как мне было поставлено задание :)

Link to comment
Share on other sites

  • 3 weeks later...

Спасибо но для меня сложно пока что

А зачем ты нам об этом говоришь?

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

  • Like 2
Link to comment
Share on other sites

доброго времени суток!

если все же не применять css3, то целесообразно ли делать бэкграунды блоков с контентом прозрачными в png, или же просто резать их как непрозрачные картинки и ставить на свои места? я правильно понимаю, что разница между этими способами связана с поддержкой браузеров ie 6,7 прозрачности?

мне просто не совсем понятно. Softlink акцентировал внимание на "ухах" слайдера, видимо, задумывалось, что их нужно было отдельно как-то приделывать, но если просто скопировать слой и сохранить в .png, то все, вроде, на своих местах. что-то мне подсказывает, что я заблуждаюсь, может, развеет кто-нибудь мои заблуждения? :)

заранее спасибо!

Edited by heywait
Link to comment
Share on other sites

доброго времени суток!

если все же не применять css3, то целесообразно ли делать бэкграунды блоков с контентом прозрачными в png, или же просто резать их как непрозрачные картинки и ставить на свои места? я правильно понимаю, что разница между этими способами связана с поддержкой браузеров ie 6,7 прозрачности?

заранее спасибо!

как угодно делайте) Можно тогда вообще одну большую картинку вставить в бг и по ней уже плясать.

Link to comment
Share on other sites

как угодно делайте) Можно тогда вообще одну большую картинку вставить в бг и по ней уже плясать.

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

Link to comment
Share on other sites

как угодно делайте) Можно тогда вообще одну большую картинку вставить в бг и по ней уже плясать.

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

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

Link to comment
Share on other sites

Там все ок со шрифтами..просто пробел в некоторых местах стоит нестандартным шрифтом...допустим "Century Gothic", а пробел "a_AventeInt" , дальше "Georgia" ...поэтому и фотошоп ругался.

Link to comment
Share on other sites

Первый вопрос. вот я поставлю фон картинку и все такое выровняю margin'ом блок по центру и по бокам останутся пустое белое пространство что делать с ними?

Поставить фон не для враппера, а для боди например.

Link to comment
Share on other sites

Первый вопрос. вот я поставлю фон картинку и все такое выровняю margin'ом блок по центру и по бокам останутся пустое белое пространство что делать с ними?

Поставить фон не для враппера, а для боди например.

сделал при уменьшени размера окна(ctrl+колесико) то белый фон появляется

Link to comment
Share on other sites

Первый вопрос. вот я поставлю фон картинку и все такое выровняю margin'ом блок по центру и по бокам останутся пустое белое пространство что делать с ними?

Поставить фон не для враппера, а для боди например.

сделал при уменьшени размера окна(ctrl+колесико) то белый фон появляется

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

Link to comment
Share on other sites

  • 3 weeks later...

Вопрос: фон получаеться около 800кб),а как вы делали фон и сколько он весит?)

У меня вся верстка получилась ~1мб. Это все картинки(включая слайдер), скрипт слайдера, два html-файла, один css и шрифты. А как вам объяснить как я делал? Обычно, резал и вставлял.

Link to comment
Share on other sites

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

п.с фон вроде как 313 кб...можно и 250 кб нормальным сделать..

Edited by Svatov
Link to comment
Share on other sites

А что с плеером делать и комментами...просто картинками вставить?...и кнопочки соц сетей с лайками...там же эти кнопочки надо с соц сетей брать генерить...

Да, я картинками все вставлял.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy