Jump to content

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


Dimitry Wolotko
 Share

Recommended Posts

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

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

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

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

 

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


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

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

Link to comment
Share on other sites

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

 

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

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

Link to comment
Share on other sites

 

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

 

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

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

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

Link to comment
Share on other sites

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

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

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

 

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

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

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

 

 

 

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

 

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

Link to comment
Share on other sites

  • 2 months later...

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

 

 

Link to comment
Share on other sites

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

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

dIQDArF.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 months later...

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

.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 by vano1208
Link to comment
Share on other sites

  • 3 months later...

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

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

 

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

 

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>
Link to comment
Share on other sites

  • 2 weeks later...
  • 3 months later...

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

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

Link to comment
Share on other sites

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

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

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

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

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

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