Ещё макет для вёрстки

[Тамара]

Обратите внимание:

1. Текст на макете не черного цвете. 

2. Снизу четко видна разная высота колонок (по крайней мере у меня в Хроме так отражается)

3 В левом верхнем углу рядом с логотипом есть кнопка. И я так поняла что именно на нее и должна быть повешена ссылка. Иначе зачем бы она там была. А у Вас ссылка повешена на весь блок с логотипом и текстом. (Это мое мнение). 

 

Это так с первого взгляда. сейчас еще покопаюсь

В этом разделе разные варианты верстки.

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

[Тамара]

Да, еще для forest79 обрати внимание на выравнивание текста в абзацах. У тебя текст прижат к левой стороне.  Не хватает text-align: justify;

[Sensei]

У тебя текст прижат к левой стороне. Не хватает text-align: justify;

 

Спорный момент.

Помимо макета есть еще и здравый смысл, и он подсказывает мне, что текст со столь короткой длиной строки выравнивать по ширине не самая лучшая идея.

[Тамара]

 

У тебя текст прижат к левой стороне. Не хватает text-align: justify;

 

Спорный момент.

Помимо макета есть еще и здравый смысл, и он подсказывает мне, что текст со столь короткой длиной строки выравнивать по ширине не самая лучшая идея.

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

[Тамара]

Интересует мнение уже опытных людей. Sensei может подскажете такой вопрос.  Здесь выше обсуждался вопрос  о фоновых изображениях. В частности, в макете к фонам (строка меню, фон заголовка статей в левой колонке) применены различные эффекты.  Вопрос идет об оптимизации решения при верстке этих фоновых изображений. Ну и возможно что в данном случае требуют заказчики или начальство.    Например: 1. Можно конечно просто в фотошопе склеить  слои с фоном и эффектом, потом вырезать картинку по контуру, сохранить и вставить в background. Но здесь получится приличный объем.

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

3. Или стоит попросить дизайнера упростить вариант. Например попробовала сделать так. В фотошопе склеила слои, немного отступила сверху и вырезала небольшую горизонтальную полоску высотой 5 рх. размыла фон используя фильтр, ну например "Размытие по Гауссу..." чтобы не выделялись четко края. и вставили в background вместе с repeat-у . Вроде и неплохо получается. Но конечно не в совсем точном соответствии с макетом.

 

Вот тут и вопрос.

1.Соответствовать дизайну лучше всего будет конечно 1 вариант. Но как это отражается на работе сайта, особенно если сайты большие с большим количеством изображений.

2. Ну и конечно как в данном случае поступают  опытные верстальщики.

 

 

 

[Sensei]

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

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

[Тамара]

Спасибо. Все ясно.

[Orysya]

Добрый вечер, уважаемые форумчане!

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

 

Ссылка на исходники - http://www.ex.ua/449518514335

[afdw]

.

Edited February 27, 2015 by afdw

[murovey]

Dmitry Wolotkо, спасибо за макет. Кому не лень посмотреть оцените пожалуйста http://kav.pe.hu/. Я был бы очень рад услышать на сколько я сделал плохо или не очень плохо это задание. Это моя первая html страничка по .psd макету. Спасибо!

 

 

[afdw]

Dmitry Wolotkо, спасибо за макет. Кому не лень посмотреть оцените пожалуйста http://kav.pe.hu/. Я был бы очень рад услышать на сколько я сделал плохо или не очень плохо это задание. Это моя первая html страничка по .psd макету. Спасибо!    

Вы учитываете, что сайт будет наполняться контентом?!

[rus]

afdw, это не очевидно, скорее всего это фиксированный блок с фиксированной инфой, но высоту все же ставить не стоит - в этом согласен.

[murovey]

Спасибо за информацию. Нужно поработать в этом направлении. Думал что сходу закидают тапками... возможно не все так плохо. Спасибо что не рушите мой интерес к вёрстке.

[Reynevan]

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

[afdw]

А не надо вырезать. Надо просто скопировать крайние точки и воспроизвести этот градиент с помощью CSS.

[vano1208]

Там столько всего в меню на фоне...

.nav-background-bottom-layer { 	background: #21418b;}.nav-background-middle-layer { 	background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .3));	background-blend-mode: overlay;}

<nav class = "nav-background-bottom-layer nav-background-middle-layer nav-background-top-layer">

У меня не работает blending-mode. Что не так, подскажите?

Можно и картинкой все сделать, но хочу научиться с этим работать.

_____

Получилось с помощью mix-blend-mode, но теперь у меня всё, что есть в блоке меню имеет этот режима наложения. Как мне его использовать только для одного слоя фона?

Edited August 7, 2015 by vano1208

[afdw]

А зачем он там? Дайте ту область, где нужен этот blending mode.

[vano1208]

 

Здесь в фотошопе есть заливка сплошным цветом и поверх три градиента с режимом наложения overlay и разной прозрачностью.

[Acme]

Только осваиваю верстку.

Подскажите, пожалуйста, этапы верстки?

 

Если я правильно понимаю, то:

 

1) Вырезаем картинки

Фон можно одной картинкой или градиентом нужно ? То есть, вырезать маленький кусочик (1пх в высоту и ширину) и растянуть его. После добавить картинки зданий и облоков. Верно? )

 

2) Начало верстки

Как правильно сверстать вверх?

Не было еще подобных шаблонов, где такой скос идет. В верстку шапки не входит нарисованное здание?

 

Правильно ли будет так:

<!doctype html><html>    <head>    <meta charset="UTF-8">    <link rel="stylesheet" href="style.css">    <title>Фиксированный шаблон с одной колонкой</title>    </head>        <body>            <div id="wrap">                <div id="header">                    <div class="header-content">шапка(лого,цитата,поисковик)</div>                </div>                <div id="content">                    <div id="left-bar">                        <div class="left">левая колонка(изображение здание, два блока)</div>                    </div>                    <div id="main">                        <div class="content">основной контент(верхнее меню и основой контент)</div>                    </div>                                    </div>                <div id="footer">футер</div>            </div>        </body>        </html>

[ученик]

Кто ищет что бы поверстать, велком - ещё одна PSD'шка.

[Скачать] 7.27mb

Симпатичный у вас сайт ! Мне оформление понравилось , минимализм , очень красиво это смотрится

[WeDaily]

Здравствуйте!

Ребята, кто возьмётся сверстать такой шаблон?  http://www.bostonglobe.com/  =  https://www.washingtonpost.com/ = http://www.chicagotribune.com/ = http://www.dailysabah.com/ = http://www.bbc.com/ = в преоритете первый, он точно подходит.

[Dlynnyj]

В 20.04.2012 в 12:25, flintovich сказал:

Сверстал этот макетик.

Довольно хорош, получил большое удовольствие.

Если кому интересно, то кину ссылку на него в вебе.

не откажусь попробовать