Содержание
- 1 Как пользоваться программой?
- 2 Бесплатная платформа создания сайтов
- 3 SublimeText
- 4 Конструктор сайтов uCoz
- 5 Notepad++
- 6 Сколько времени нужно для того, чтобы начать верстать
- 7 Верстка текста из слоев PSD-макета
- 8 Устанавливаем базовое форматирование
- 9 Как работать с локальным сервером Denwer
- 10 Front Page
- 11 Visual Studio Code
- 12 4. Grid (сетка).
- 13 Photoshop — редактор изображений
- 14 Конструктор сайтов uKit
Как пользоваться программой?
К счастью пользоваться программой можно очень просто. Первый шаг, который я не буду описывать это установка программы. Берешь вводишь в поисковике слово скачать и название программы, и получаешь официальную страницу.
Дальше все как обычно.
Заходим в программу видим начальную картинку.
Начальное окно программы 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;
- часть шаблонов похожи между собой.
С этим читают
- Сайт с www или без www
- Траст сайта
- Как заставить себя работать с помощью 4 простых вопросов
- Сколько страниц текста занимает 1000 знаков
- Верстка сайта — шпаргалка для начинающих
- Как сделать кроссплатформенное десктопное приложение на базе веб-технологий
- Атрибут alt тега img
- Списки Лучших Сайтов
- Как указать главное зеркало сайта
- Яндекс икс