Jump to content
  • 0

Flanidub
 Share

Question

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

Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0

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

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

Edited by Kronus
Link to comment
Share on other sites

  • 0

landing page - с английского вроде как посадка (хотя это больше к самолетам относится), а так, если по (уже) старинке, то - сайт-визитка, промо-сайт, или одностраничный сайт.

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

Link to comment
Share on other sites

  • 0

Ну, лендинг, скорее не отдельный сайт, а обособленная страница под рекламные (или поисковые в контексте SEO) переходы. Также есть ещё русскоязычная копирка с этого термина — "посадочная страница".

Link to comment
Share on other sites

  • 0

Сверстайте этот http://htmlforum.ru/index.php?showtopic=16763 или этот http://htmlforum.ru/index.php?showtopic=13276

От Влада макеты тоже не сложные.

Но то что не знаете скрипты это не страшно. Эти места можно просто сверстать, без навешивания скриптов.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

попрощался...и снова вопрос в шаблоне http://htmlforum.ru/...showtopic=16763 ,который мне скинула sigma77,да и в любом другом шаблоне скажите как вырезать картинки фона шапки там,надписей!(вопрос не в тему совершенно,но мне нужна помощь подскажите я не знаток фотошопа)

Link to comment
Share on other sites

  • 0

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

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

вообще, в нете полно уроков по фотошопу.

Link to comment
Share on other sites

  • 0

Нестандартные шрифты (кроме проприетарных) можно встроить и без скриптов — с помощью @font-face. Для разных браузеров разные форматы, но эту проблему решает шрифтобелка.

Link to comment
Share on other sites

  • 0

Несколько макетов в порядке нарастания сложности:

https://web.archive.org/web/20130302154533/http://divhack.com/

http://vin-villard.alwaysdata.net/psd/home.psd

 

Где можно остальную часть туториалов с дивхака найти? Может у кого архив остался?

Link to comment
Share on other sites

  • 0

 

Несколько макетов в порядке нарастания сложности:

https://web.archive.org/web/20130302154533/http://divhack.com/

http://vin-villard.alwaysdata.net/psd/home.psd

 

Где можно остальную часть туториалов с дивхака найти? Может у кого архив остался?

 

Там короче надо открыть хтмл код сохраненный в веб-архиве (просмотреть исходник) и в нем будут все ссылки на макеты 1.psd 2.psd и так далее.

Link to comment
Share on other sites

  • 0

 

 

Несколько макетов в порядке нарастания сложности:

https://web.archive.org/web/20130302154533/http://divhack.com/

http://vin-villard.alwaysdata.net/psd/home.psd

 

Где можно остальную часть туториалов с дивхака найти? Может у кого архив остался?

 

Там короче надо открыть хтмл код сохраненный в веб-архиве (просмотреть исходник) и в нем будут все ссылки на макеты 1.psd 2.psd и так далее.

 

Спасибо! Разобрался уже :)

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
Answer this question...

×   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

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By ilyamio
      Здравствуйте. Имеется рабочий скрипт конвертера валют. https://ilyamio.github.io/currencyconverter/
      Мне необходимо изменить источник загрузки курсов на ЦБ РФ вот по этой ссылке: https://www.cbr.ru/scripts/XML_daily.asp
      А также мне необходимо установить ограничение на количество обращений к сайту ЦБ РФ - 1 раз в сутки. При частом обращении, могут заблокировать.
      Вот в этом js файле находятся настройки конвертера:
      const from_currencyEl = document.getElementById('from_currency'); const from_ammountEl = document.getElementById('from_ammount'); const to_currencyEl = document.getElementById('to_currency'); const to_ammountEl = document.getElementById('to_ammount'); const rateEl = document.getElementById('rate'); const exchange = document.getElementById('exchange'); from_currencyEl.addEventListener('change', calculate); from_ammountEl.addEventListener('input', calculate); to_currencyEl.addEventListener('change', calculate); to_ammountEl.addEventListener('input', calculate); exchange.addEventListener('click', () => { const temp = from_currencyEl.value; from_currencyEl.value = to_currencyEl.value; to_currencyEl.value = temp; calculate(); }); function calculate() { const from_currency = from_currencyEl.value; const to_currency = to_currencyEl.value; fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency}`) .then(res => res.json()) .then(res => { const rate = res.rates[to_currency]; rateEl.innerText = `1 ${from_currency} = ${rate} ${to_currency}` to_ammountEl.value = (from_ammountEl.value * rate).toFixed(2); }) } calculate(); Как мне изменить настройки в этом файле чтобы курсы брались с https://www.cbr.ru/scripts/XML_daily.asp и включить ограничение на количество обращений по ссылке cbr.ru - 1 раз в сутки?
      Заранее спасибо всем, кто хотел помочь с решением этой задачи.
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
×
×
  • 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