Как сверстать шаблон сайта из psd в html и css

Как пользоваться программой?

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


Дальше все как обычно.

Заходим в программу видим начальную картинку.

Начальное окно программы Prepros

На ней даже пишут, мол перетащи файл на это окно, чтобы добавить проект. Что мы и сделаем, и самое интересное, как только мы добавляем проект, он работает.

Там мы можем увидеть структуру проекта, ну и всякие дополнительные функции.

Когда мы перетащили проект и как я говорил, что он уже заработал, то множество людей (я один из них на начале работы с программой), просто открывают редактор и работают уже в нем. Иногда большего и не нужно. Оно себе транслирует на браузер и обновляет страницу. SCSS компилируется ну и на этом все. Больше и не нужно, но все же я решил исследовать эту программу подробнее и как оказалось там функционал будет намного круче чем себе мог представить.

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

Но не все по правде знают английского, ну по факту лишнее описание в интернете об этой программе кому-то да пригодится, я в этом уверен.

Список файлов в проекте

Список файлов, которые находится в проекте, по факту это всего лишь список, больше ничего. Никакого дополнительного функционала он не дает. Разве что можно открыть какой-то файл конкретно для просмотра в браузере нажав на файл правой кнопкой.  У или загрузить на FTP если решитесь его настроить.

Меню логов

Это меню логов, очень хорошее меню для того случая, если вдруг была допущена ошибка, то программа высветит где и какая ошибка. В целом все очень просто. Красным выделено ошибку, которая мешает следующей работе, а зеленым успех. (Картинка 5)

FTP меню

FTP меню, в нем ты будешь видеть какие файлы не синхронизированы с проектом, а какие синхронизированы. Даже немного напоминает Git только вот нет контроля версий, чтобы откатить какие-то из изменений. Я лично этой функций не пользовался, но если что настроить ее не тяжело. Для  этого заходим в настройки и вводим все данные от FTP, для этого переходим в Settings -> FTP Settings, ну и в этом меню собственно заполняем соответствующие поля.

Алгоритм работы с FTP

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

После переходим в настройки и заполняем следующие поля:

Настройка Ftp в программе Prepros часть 1

Настройки Prepos

Как я уже говорил – программу из коробки настраивать никак не нужно. Но если все-таки нужно исправить какой-то из моментов, то сделать это будет очень просто.

Каждый пункт я расписывать не буду, но скажут так, можно настроить каждый формат которые будет компилироваться, начиная от SCSS и заканчивая TypeScript.

Кроме того, можно настроить через какой порт открывать в браузере localhost, на какие файлы в этом проекте распространяется файл Watcher (То есть для конкретного проекта, можно отключить компиляцию, что я считаю очень важным моментом).

Работа с LivePreview

Работа с этой функции одно удовольствие. Мало того, что оно отображает все изменения в реальном времени. Так еще можно раздать это дело на телефон и так же работать как в браузере на телефон.

Кроме того, можно использовать файловый инспектор (Как на Google Chrome), только в телефоне. Причем не эмулировать телефон, а увидеть, как оно отображается на телефоне и исправить ошибки если есть такие.

Что дальше?

А дальше выбирать тебе. Это кстати не рекламный пост, а просто пост гордого пользователя замечательным софтом.

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

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

Бесплатная платформа создания сайтов

Если сайт Вам нужен для галочки, а основной источник трафика для вас Яндекс Директ, то не проходите мимо новой фишки от Яндекса.

Турбо-страницы Яндекс — дешево и сердито. Для парней и дам, которые не готовы регистрировать домены, прописывать ДНС и проводить SEO оптимизацию сайта.

Турбо Cтраницы Яндекс

  • Простейший функционал
  • Цена 0 руб.
  • Грузится как пуля

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


Затем рядом со ссылкой выбрать Турбо-страница, затем нажать Добавить

Далее можно выбрать из пары готовых «шаблонов» или сделать все самому с нуля.

Редактор не требует особых знаний и навыков, в нем разберется даже ребенок.

SublimeText

Ещё одним продвинутым текстовым редактором для работников сферы веб-программирования является SublimeText. Он также умеет работать со многими языками, включая Java, HTML, CSS, C++. При работе с кодом применяется подсветка, автодополнение и нумерация. Очень удобной функцией является поддержка сниппетов, с помощью которой можно применять заготовки. Использование регулярных выражений и макросов также может обеспечить значительную экономию времени для решения поставленной задачи. SublimeText позволяет работать одновременно на четырех панелях. Расширяется функционал программы путем установки плагинов.

Главным недостатком приложения, если сравнивать его с Notepad++, является отсутствие русскоязычного интерфейса, что вызывает определенные неудобства особенно у неопытных пользователей. Также не всем пользователям нравится появляющееся уведомление с предложением приобрести лицензию в окне бесплатной версии продукта.

Конструктор сайтов uCoz

Юкоз – самый мощный сайтбилдер в нашей подборке. Существует на рынке более 10 лет, развивается динамично по сей день. Построен по модульной схеме: каждый тип сайтов и более-менее значимые функции здесь выделены в отдельные модули, которые можно подключить или отключить выборочно. Форум, блог, магазин, галерея, доска объявлений, опросы, видео, новости, каталоги – всё это примеры модулей uCoz.

Создать сайт в uCoz

Это универсальный сервис. То есть он подходит для создания всех типов сайтов в равной степени хорошо. Содержит множество продвинутых и специфических возможностей: версия сайта для слабовидящих, подключение SSL и нескольких доменов к одному сайту, правка кода шаблонов и модулей, конструктор шаблонов, синхронизация с 1С для магазинов, поддержка PHP-скриптов и многое другое.

Достоинства uCoz:

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

Недостатки:

  • относительная сложность освоения для новичков;
  • большинство встроенных шаблонов устаревшие.

Notepad++

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

Стоит отметить, что он гораздо удобнее своего предшественника — стандартного блокнота. Большее количество настроек, возможность открывать сразу несколько файлов в одном окне и быстро переключаться между ними, автосохранение, обозначение строк кода и прочие приятные мелочи позволяют сделать работу более комфортной. Но Notepad++ все равно не является интегрированной средой разработки (ЕСР), поэтому он не умеет добавлять недостающие знаки или подсвечивать ошибки.

Этот редактор удобен и вне программирования — его успешно используют для работы с текстом, составления списков или ведения записей. Поэтому стоит попробовать поработать с ним — если больше понравится писать код в ЕСР, такая программа все равно сможет принести пользу.

Сколько времени нужно для того, чтобы начать верстать

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

Нужно учитывать разные факторы:

  • Какой вы человек — в первую очередь!
  • Какой у вас уровень занятости, и сколько времени вы можете выделять на изучение;
  • Как быстро вы изучаете информацию;
  • Из какой профессии вы приходите в профессию верстальщика;
  • Насколько интересно это вам;

Этот список можно продолжать и дальше, но по факту я перечислил самые важные. Я например в эту профессию пришел не сразу, но войти в нее мне было не сложно, учитывая то, что начинал я с SEO (там хоть и изредка но нужно было работать с html) после чего я перешел в программирование (Php), ну а дальше, я решил для себя что хочу быть верстальщиком.

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

  • Photoshop — 2 недели;
  • HTML — 1 месяц;
  • CSS — 3 месяца;
  • JavaScript — 2,5 месяца;

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

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

Заключительная часть статьи

В целом я попытался вложить в этот пост столько информации сколько я ждал от таких постов на самых первых этапах своей карьеры верстальщика или веб-мастера (веб-разработчика) в цвелом.

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


К примеру последняя моя статья была написана на тему верстки grid layout, такая себе шпаргалка вышла. Пока я не умел пользоваться гридами, построить такой документ было немного сложнее, это и есть то самое упрощение о котором я говорил выше.

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

Верстка текста из слоев PSD-макета

Все текстовые слои в Photoshop преобразуются в текстовые блоки в HTML верстке. При этом сохраняются все стилевые параметры текста и параграфа, такие как:

  • Шрифт
  • Размер шрифта
  • Цвет текста
  • Эффект отбрасывания тени
  • Выравнивание текста (left, centered, right, justify)
  • Отступ сверху
  • Отступ снизу
  • Межстрочный интервал
  • Надстрочный/подстрочный текст
  • Направление текста (LTR или RTL)
  • и другие

Текст, шрифт которого не является стандартным WEB шрифтом, верстается как изображение, имеющее в качестве альтернативного текста текст из слоя в Photoshop. Сервис создаст предупреждение при использовании нестандартных шрифтов в текстовых слоях.

Если вы все же хотите сверстать слой с нестандартным шрифтом как текст и затем подключить шрифт с помощью @font-face, пометьте такой слой тегом #text. После конвертации не забудьте вручную добавить директиву @font-face в сгенерированный сервисом .css файл. Заметьте, что т.к. на нашем сервере нет нестандартных шрифтов, то произойдет замена шрифта стандартным, отчего на сгенерированном скриншоте верстка будет не соответствовать оригинальному дизайну. Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией «Конвертировать ВСЕ текстовые слои в текст» при конвертации PSD файла.

Для текстовых слоев в Photoshop разрешается устанавливать только следующие эффекты (Blending Options) :

  • Отбрасывание тени (Drop Shadow)
  • Наложение цвета (Color Overlay)

Только эти эффекты могут быть установлены с помощью CSS. Текстовые слои, для которых установлены какие-либо другие эффекты, будут сконвертированы в изображения. Для создания заголовков различных уровней используйте теги #h1, #h2, #h3, #h4, #h5, #h6.

Границы текстового блока могут отличаться в браузере и в Photoshop. Для более точного управления границами текста переведите текстовый слой в режим «Paragraph Text» из режима «Point Text». В данном режиме редактирования Вы сможете точно установить границы текстового слоя. Для изменения режима редактирования, кликните правой кнопкой мыши по слою в панели слоев и выберите соответствующую опцию — «Convert to Paragraph Text» либо «Convert to Point Text».

Всегда отключайте сглаживание текста в своих PSD макетах. CSS не поддерживает сглаживание, поэтому даже при ручной верстке не получится сверстать текст того же размера и начертания, как у текстового слоя в Photoshop, имеющего сглаживание.

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

* { margin: 0px; padding: 0px; }

Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

a:link { color: #D72020; } a:hover { text-decoration: none; color: #FF0000; } a:visited { color: #D72020; }

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

body { background: #FFD723 url(images/back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #333333; }

Определение блока content:

#content { margin: 0 auto; background: #ffffff; width: 786px; text-align: left; }

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

Как работать с локальным сервером Denwer

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

Пригодится в работе: «Онлайн-генератор текста-рыбы lorem ipsum»

Скачайте дистрибутив с сайта проекта. Закройте браузеры и запустите установщик. Используйте подсказки в диалоговом окне инсталлятора. После завершения установки браузер откроет окно приветствия. Запустить программу можно с помощью ярлыка на рабочем столе Start Denwer.

В адресную строку браузера введите URL https://localhost/denwer/. Вы попадете на стартовую страницу локального сервера Denwer.

Чтобы установить CMS на локальный сервер «Денвер», создайте раздел с названием сайта в папке WebServers – Home. В разделе создайте еще одну папку с именем www. Распакуйте в нее архив с дистрибутивом движка.

Создайте базу данных экспериментального сайта в разделе управления phpMyAdmin. Для этого введите в адресную строку браузера адрес https://localhost/tools/phpMyAdmin/.

Перезапустите локальный сервер с помощью ярлыка Restart Denwer на рабочем столе. Установите WordPress. Для этого в адресной строке браузера наберите адрес экспериментального сайта.


Front Page

Теперь рассмотрим блок приложений, которые называются визуальными HTML-редакторами. Начнем с обзора продукта компании Microsoft под названием Front Page. Эта программа имела немалую популярность, так как в свое время входила в состав пакета Microsoft Office. Она предлагает возможность верстки веб-страниц в визуальном редакторе, который работает по принципу WYSIWYG («что видишь, то и получишь»), как в текстовом процессоре Ворд. При желании пользователь может открыть стандартный html-редактор для работы с кодом или совместить оба режима на отдельной странице. В интерфейс приложения встроено много инструментов форматирования текста. Имеется функция проверки правописания. В отдельном окне можно просмотреть, как будет выглядеть веб-страница через браузер.

При таком большом количестве достоинств программа имеет ещё больше недостатков. Самый главный выражается в том, что разработчики не поддерживают её с 2003 года, а это значит, что продукт безнадежно отстал от развития веб-технологий. Но даже в свои самые лучшие времена Front Page не поддерживал большой перечень стандартов, что, в свою очередь, приводило к тому, что гарантировано корректно веб-страницы, созданные в данном приложении, отображались только в браузере Internet Explorer.

Visual Studio Code

Бесплатный кроссплатформенный редактор компании Microsoft. Является одним из самых популярных редакторов на данный момент. Скачать можно здесь.

В базовой версии есть интеграция с Git и режим отладки кода. Поддерживает, в том числе и через дополнения, большое количество языков.

Расширения для редактора

VS Code в базовой версии содержит большое количество плагинов. К примеру, консоль, emmet и мини-карта в нём присутствуют с самого начала. Добавить новые пакеты можно через интерфейс программы. Для этого во вкладке активного меню нужно выбрать пункт и в поле ввода ввести интересующий плагин. После этого его можно установить.

Установка расширений в VS code.

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

Добавляющие функциональность:

  • Для удобной работы с системой контроля версий Git можно добавить плагины Git History и GitLens.
  • Project Manager — добавляет редактору возможность работать с несколькими проектами.
  • Settings Sync — синхронизирует настройки и установленные плагины между программами на разных компьютерах.
  • Beautify — форматирует текст по заданным настройкам и приводит его к единообразию.

Проверяющие синтаксис:

ESLint — проверяет JavaScript код по заданным параметрам.

Изменяющие внешний вид:

  • Vscode-icons — заменяет стандартные иконки файлов.
  • Посмотреть на кастомные темы для Vscode можно на официальном сайте.

4. Grid (сетка).

Как правило .psd макет веб-дизайнер разбивает на колонки(12, 24 и прочие извращения). Самостоятельно подгонять под сетку с помощью отступов, это издевательство над собой. Поэтому лучше воспользоваться сетками от фреймворков. Самая известная от Bootstrap. Bootstrap — это свободный набор инструментов. Который закрывает сразу множество задач по верстке. Поэтому советую изучить его и использовать как повседневный инструмент в верстке.

Есть еще менее известные сетки, но не значит, что они хуже остальных, например:Skeleton илиSmart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.

Photoshop — редактор изображений

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

Для того чтобы верстать, очень больших знаний в Photoshop не нужно иметь, я даже могу перечислить что именно нужно знать:

  • Слои;
  • Шрифты;
  • Работа с цветами;
  • Выгрузка объектов (картинок);

По идее это все, но если есть еще что-то можете меня поправить, я сходу и не вспомнил. Но точно могу сказать, что эти четыре пункта нужны для уверенного уровня верстальщика. Все остальное типа вырезать или уменьшить размер картинки это опционально (нужно в редких случаях). Больше ничего не нужно, но если хочется научиться большему, то лишним это точно не будет — рано или поздно пригодится.

Конструктор сайтов uKit

Юкит – практически идеальный сервис для новичков, заинтересованных в создании сайта-визитки. Все работы здесь проходят в визуальном редакторе – вы изменяете дизайн и контент, видя результат в реальном времени. Панель управления выглядит стильно, элементарна в освоении. Функционала для решения поставленных задач хватает с головой.

Создать сайт в uKit

uKit – платформа для создания бизнес-сайтов. Существует немало схожих по процессу разработки сервисов, но Юкит имеет серьёзное преимущество перед ними при прочих равных – доступность. Стоимость годовой аренды составляет $48. В сети без проблем можно найти промо-коды со скидкой в 25%, что снизит затраты на содержание сайта до $36/год.

Достоинства Юкит:

  • большое количество современных адаптивных шаблонов хорошего качества;
  • удобный редактор;
  • широкий ассортимент виджетов;
  • низкая стоимость;
  • отличная SEO-оптимизация движка из коробки, высокая скорость работы.

Недостатки:

  • в базовом тарифном плане нет редактора HTML;
  • часть шаблонов похожи между собой.

С этим читают