Как сверстать шаблон сайта из psd в html и css
Содержание:
- Всё уяснили, а теперь…
- Чего мы ожидаем?
- Настройка рабочего пространства в программе Adobe Photoshop
- Четвертый уровень — конечный
- Первый день новой жизни
- Шаблоны веб-сайтов от Nicepage
- Минимальный список требований для макетов любого сайта, даже лендинга и даже на один экран:
- Визуальный вид
- Приобретение PSD макетов напрямую у дизайнера
- Первый уровень — начинающий
- Третий уровень — продвинутый
- Создание структуры веб-страницы
- Создание левой панели
- Какие макеты мы ищем
- 1. Редактор кода — думаю можно скачать бесплатно
- Какой из способов выбрать?
- Добавляем разметку HTML
- А как же мобильные?
Всё уяснили, а теперь…
Помним, что перед началом работы стоит уделить достаточно времени на обсуждение всех деталей, которые упростят и оптимизируют вашу работу
Процесс согласования покажется длительным, но важно чётко определить сроки выполнения проекта. Нет ничего плохого в том, чтобы их завысить, закладывая в оценку риски — незапланированный отпуск, болезнь, сложности при вёрстке, время на дополнительные обсуждения макета
Адекватность рабочего процесса и полноценный результат на выходе зависят только от вашего участия в подготовке проекта к вёрстке. А как бонус — здоровый сон, сильная работа для портфолио и море печенья.
Чего мы ожидаем?
В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки
Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки
Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.
Настройка рабочего пространства в программе Adobe Photoshop
Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.
Открыв программу Adobe Photoshop, вы увидите примерно следующее:
- Строка главного меню;
- Панель параметров;
- Панель инструментов;
- Дополнительные панели.
Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace:
Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.
Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:
При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:
Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:
Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open), и выберите файл.
Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers:
Теперь кликните два раза по линейке и откройте вкладку Units & Rulers, чтобы настроить единицы измерения. Выберите в блоке Units для Rulers и Type единицы измерения пиксели:
Теперь все готово, можно начинать верстать макет.
Четвертый уровень — конечный
Хотя, это я, наверное, лукавлю. Не конечный, но близкий к таковому 🙂
Что нужно здесь:
- Изучить работу сборщиков типа gulp и webpack.
- Изучить препроцессоры, хотя бы один.
- Изучить git
- Изучить доступность. Применять подходы в доступной верстке. Скоро на эту тему будут статьи у меня 🙂
- Уметь написать кастомные анимации на CSS или JS. Без них опять же — никуда.
Больше ничего не идет в голову, если что-то есть у Вас — пишите в комментарии 🙂
Вот такой вот списочек в целом. Возможно что-то упустил, бывает. Но примерно всем этим (и чуть больше) владею сейчас я, и по сути, могу сверстать любой сайт. Как именно это изучать — вам решать, но самому, без наставника — довольно тяжело 🙂
Первый день новой жизни
В этой статье мы используем четыре различных способа верстки сайта:
Таблицы. Вам даже не нужно использовать отдельный файл стилей
И, что более важно, они не ломаются.
Float. Мы говорим о свойстве CSS
Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS.
CSS-фреймворки. Они работают так же, как JavaScript-фреймворки. Подключите исходный файл в заголовке (например, ), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
Флексбокс. Флексбокс — это короткое название CSS Flexible Box Layout Module. Это более новая по сравнению со свойством float технология. Основной принцип флексбокс — предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.
Теперь пора попробовать каждый из них.
Шаблоны веб-сайтов от Nicepage
Nicepage — это конструктор сайтов, с помощью которого вы можете создавать шаблоны, шаблоны cms, включая темы WordPress, создавать высококачественную домашнюю страницу, целевую страницу для поддержки, контактов и услуг в соответствии с современными веб-стандартами. Сайты могут быть самыми разными, представляя корпоративный бизнес, профессиональный веб-сайт, бизнес-консалтинг, бизнес-услуги, маркетинговый веб-сайт, сайт туристического агентства, модную красоту, косметический спорт, включая определенные веб-сайты со звуковыми эффектами и музыкальными звуковыми эффектами, созданными в нескольких версий макеток. Наши бесплатные шаблоны сайтов включают в себя широкий набор шаблонов CSS, подходящих для создания многоцелевого адаптивного веб-сайта с тематическим содержанием продукта, например, для модного бизнеса.
Минимальный список требований для макетов любого сайта, даже лендинга и даже на один экран:
1. Сетка в макете
Зачем это нужно? Макет с сеткой своим эстетическим видом уже вызывает еле слышное удовлетворённое мурлыканье верстальщика. Также сетка даёт возможность без особых усилий и временных затрат собирать каркас страницы и располагать (позиционировать) элементы на той же странице максимально приближённо к тому, что изображено на макете. От направляющих не составит труда точно измерить расстояние и записать его в пиксельном эквиваленте в таблицу стилей.
2. Градиент к слою
Для сайта градиент в некоторых случаях выглядит эффектно, применять его крайне рекомендуется в обычном режиме наложения ( blend mode: normal). Использоваться должны его реальные цвета, никаких симпатичных полупрозрачностей и сложных режимов наложения, таких как multiply, screen, overlay и тому подобное.
Также режим blend mode: normal относится к любым свойствам слоя, таких как inner shadow, drop shadow…
3. “Слой на слое”
Верстальщик не поприветствует градиенты и другие различные эффекты, созданные путём “слоя на слое”. Слой должен быть один, как ты в 3 часа ночи на кухне у холодильника.
4. No to gradient borders!
Или никаких рамок и stroke с использованием градиента.
5. Шрифты в макете
При использовании нестандартных шрифтов настоятельно рекомендуется их наличие у верстальщика в формате .ttf или .otf. Далее они будут конвертироваться в определённые форматы для веб-страницы. Желательно использовать не более 2-х нестандартных шрифтов, так как их количество влияет на рендеринг страницы в браузере: чем их больше, тем дольше будет отрисовываться контент.
В идеале нестандартные платные шрифты должны быть куплены и иметь лицензию на их использование в вебе. Конечно, многие не станут переживать по этому поводу, шрифт будет использован и всё! Но если проект коммерческий, масштабный или будет привлекать инвесторов, миллион пользователей в день, дементоров и госнаркоконтроль, то лучше заранее позаботиться о легальном использовании всех платных шрифтов.
6. Стандартные элементы типографики
Наличие одного макета со стандартными элементами веб-страницы возносит крутость дизайнера до небес. На таком макете должны быть представлены заголовки, параграфы, таблицы, списки, блоки с цитатами и другие стандартные моменты.
7. Состояние наведения
Иными словами — :hover. Любой сайт будет содержать ссылки, кнопки или другие элементы, которые будут иметь состояние наведения или нажатия. Набор потенциально “наводимых” элементов:
- Ссылка.
- Кнопка (иногда может иметь состояние неактивности — disabled).
- Стрелка слайдера.
- Поле формы.
- Иконка социальной сети.
И еще целое множество элементов, на которые будут наводить и получать какой-либо эффект. Показать изменённые состояния можно следующими способами:
- На элементе будет присутствовать курсор в виде руки (figure 1)и будет показан наводимый эффект.
- Макет может содержать скрытый слой с элементами в состоянии наведения, нажатия.
- Отдельный макет с набором элементов, которые будут иметь эффекты наведения, нажатия. Могут входить в макет со стандартными элементами типографики.
figure 1
8. Каждому блоку — по папке
А также и по человекочитаемому названию. Конечно, если верстать будет робот, к названию из символов и цифр вопросов нет, но для лучшего понимания верстальщиком его местонахождения на макете логичное название блока, например, “Шапка” даст 100%-ную информацию о локации.
Дизайнеры-сверхлюди умудряются располагать папки с блоками согласно их порядку на макете — шапка, сайдбар, контент, подвал.
9. Скрытые слои
Если в макете предусмотрены скрытые слои/папки с жизненно важным содержимым, таким как модальные окна, выпадающие панели, выпадающие n-уровневые меню, то их стоит выделять цветом и давать схожее по функциональности блоков название.
10. Название макетов
Ну и наконец — здравое название макетов. Открывая папку или архив хочется видеть осмысленные названия макетов, такие как “Главная”, “Контакты”, “О нас” и тому подобную красоту.
Воплотить в реальность указанные выше пункты — дело пары часов. Но на выходе дизайнер получит логически структурированные слои в макетах, осмысленные названия папок с блоками, а верстальщик в свою очередь потратит на реализацию макетов в несколько раз меньше времени и хорошего настроения.
Также все вышеупомянутые манипуляции помогут избежать следующих недугов:
- Несоответствие макета и готовой вёрстки.
- Проблем с утверждением вёрстки заказчиком.
- Проблем с кроссбраузерностью и работой вёрстки в целом.
Визуальный вид
Отступы
Просмотрите визуально шаблон сайта, обратите внимание на отступы между блоками. То же самое касается всех элементов: поля форм, кнопки, расстояние между пунктами меню, расстояние между текстом и картинками, расстояние между текстом и видео, отступы в ячейках таблиц и т.д. Особое внимание следует уделить отступам слева и справа от краев окна браузера до общего контейнера сайта. Этим пунктом многие верстальщики просто пренебрегают
Вроде бы все хорошо, но когда начинаешь уменьшать размеры окна браузера, то все элементы начинают прилипают к краям окна браузера, что в свою очередь смотрится просто отвратительно.
Вообще об отступах следует думать дизайнеру, но просто дело все в том, что дизайнер в силу своей неопытности может не учесть такой момент. В плане отступов должна существовать некая гармония, т.е. отступы в определенных блоках или между ними должны быть одинаковыми. Например, отступы между колонками сайта — 30px, внутри блоков — 15px. Я всегда стараюсь придерживаться этой гармонии, тем более в последнее время у меня все макеты сайта нарисованы по модульной сетке bootstrap. А там как раз такие вот отступы.
Также хочу сказать и об некоторых элементах, например, поля формы, кнопки. Текст в текстовом поле не должен прилипать к краям. Также и кнопки с фоном или бордюром. Например, в текстовом поле формы я всегда задаю отступы — padding: 5px 10px, т.е. сверху, снизу по 5px, а по краям — 10px. Для меня это норма, меньше уже не то.
Картинки
Частенько попадаются сайты, картинки в которых уменьшены средствами css или html. Я считаю, извините за выражение, это натуральным извращением. Во-первых, это утяжеляет страницу. Картинки хоть и визуально кажутся маленькими, на самом деле они большего разрешения и соответственно весят больше. Во-вторых, масштабирование картинок таким образом искажает их. Уменьшение картинок следует делать в графическом редакторе, далее их нужно сохранить в оптимизированном формате (оптимальное соотношение качества картинки к его весу) и только потом уже загружать на сайт. Оптимальный размер небольших картинок — это ~50кб. Если вам нужно изменить размеры большому количеству картинок, то можете воспользоваться специальной программкой — XnView MP. Ну просто замечательная программа!
Верстка максимально без картинок средствами css
Когда я верстаю макет, то я всегда стремлюсь к тому, чтобы верстать максимально без использования картинок. Почему? Да, потому что css3 дает нам такую возможность. Например, градиент — сейчас нет необходимости вырезать однопиксельную полосу и пускать ее на повторение. Другое дело, если вы хотите угодить таким браузерам, как ИЕ 7, Ие 8, но для них я ставлю заглушку. Градиент можно создать, используя определенные правила в css. Сейчас не буду вдаваться в подробности, если интересно, то можете почитать на сайте htmlbook.ru. Я же не парюсь над этими правилами, а просто использую градиент-генератор, например этот или этот.
Если говорить об иконках, то я все чаще использую в своей практике иконочный шрифт. Об иконочном шрифте я еще буду писать, только не в рамках данной статьи. Посмотреть как выглядит иконочный шрифт можете на моем блоге, на том, на котором вы сейчас находитесь. Я недавно поменял дизайн сайта и как раз в качестве иконок применил иконочный шрифт.
Вы можете спросить, а в чем преимущества? Ну, во-первых, они легко масштабируются, т.к. они векторного типа изображения, а вектор при масштабировании практически не теряет в качестве. Ну и еще некоторые прелести. Как говорил, сейчас не буду углубляться.
Анимация максимально средствами css
Как то, бродя по англоязычным сайтам, я натыкался на такие шедевры, что прям, как говориться — ни в сказке сказать, ни пером описать. На сайтах используется анимация, причем вся анимация работает исключительно средствами css3. Применение скриптов для анимации — минимально.
Сегодня анимация на сайтах используется сплошь и рядом. Так вот, лично я считаю, что надо в это дело включать максимально css. Как я уже говорил выше css-файл браузер загружает и отрабатывает быстрее, чем js-файл. Конечно, я не говорю, что от JavaScript и jQuery стоит отказаться, вовсе нет. На самом деле бывают случае, когда анимацию мне легче сделать именно через jQuery.
В общем, по поводу использования анимации на сайте вы меня поняли.
На данном пункте я свою статью завершаю. Если что то придет в голову, обязательно дополню. Что то затянулось у меня написание статьи. Дело в том, что все мысли приходят на досуге или когда занят каким то другим делом. В этот момент самое главное вовремя записать мыслю, иначе испариться и когда придет повторно не известно.
В общем, друзья, давайте делать качественные сайты!
Приобретение PSD макетов напрямую у дизайнера
Хороший вариант для получения настоящих, “боевых” макетов. Если дизайнер опытный, у него будут неплохие шаблоны, при работе с которыми можно получить много опыта.
Проще всего купить макет за деньги. Если убедить его автора что он будет использоваться только для учебных целей, то цена, скорее всего, будет очень низкой. Но есть и варианты получить в свое распоряжение PSD макет бесплатно
- Предложить дизайнеру какой-либо бартер. Например, вы верстаете ему сайт, он отдает вам макет взамен;
- Попросить что-нибудь из тех вариантов, что дизайнер сам использовал в учебных целях. И что в дальнейшем не пошло в продажу;
- Искренне рассказать о том, откуда вы, что вы пока новичок, что хотите попрактиковаться в верстке, добавить макет в портфолио. Есть хороший шанс, что дизайнер сам пойдет вам навстречу и отдаст макет бесплатно.
Огромным преимуществом такого подхода является то, что макет, по сути, становится индивидуальным. Можно даже попросить дизайнера его немного усложнить или упростить. Добавить элементы, которые вам особенно интересны. И уж точно такого дизайна ни у кого больше не будет.
Еще одно преимущество этого способа — дополнительные контакты. Возможно тот дизайнер, к которому вы обратились, станет хорошим партнером для дальнейшей работы.
Первый уровень — начинающий
Собственно, здесь изучаем лишь основы, самые основы. Что такое теги, как начать верстать страницу, и т.д. Писать что-то свое, по крайней мере на первом уровне, не имеет смысла, а вот посоветовать ссылки — запросто:)
По большому счету, из всех тегов на первом уровне вам нужны лишь: html, head, body, meta, title, заголовки h1-h6, p, a, strong, b, ul, ol, li, button, div, img, table, span и внутренние табличные теги. Остальное — на среднем уровне 🙂
Ну и конечно, стоит выбрать себе хороший и удобный Вам редактор кода 🙂
Ну и по сути — это все, что нужно на первом уровне. Верстка простой страницы + дополнение ее картинками, таблицами и т.д.
Третий уровень — продвинутый
Здесь стоит уже знать ВЕСЬ CSS. Функции, псевдоэлементы, псевдоклассы и так далее. Конечно, в процессе практики на втором уровне вы часть изучите из-за необходимости, но в целом — это все сюда.
Конечно же, в этот этап относим и адаптивную верстку. Медиа-запросы, как с помощью flexbox делать адаптивно, вьюпорт и так далее. Опять же, с практикой все придет гораздо быстрее. Так же сюда же можно добавить кроссбраузерность.
В этом же уровне пора изучать js или хотя бы jQuery на уровне работы с DOM. Как раз недавно закончил записывать мини-курс по jQuery: jQuery-мастер, советую изучить для старта. С помощью данного языка можно создавать кучу интерактива на сайте, а в наше время без этого просто никуда.
На моем канале (ссылка в шапке) множество материалов по среднему и продвинутому уровню — смотрите и пользуйтесь!
Я бы советовал погрузиться в самые-самые азы работы с PHP, на уровне создания обработчика для отправки форм.
Ну и конечно практика. Верстайте + смотрите уже готовые верстки (есть такие длинные видео) — очень удобно. Например, мой марафон
Создание структуры веб-страницы
Создайте на рабочем столе папку и назовите ее simple text. В этой папке создайте два файла index.html и style.css.
Как вы помните структуру веб-страницы мы создаем на языке HTML. Поэтому сначала открываем файл index.html, и записываем в нем первоначальный код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple text</title>
</head>
<body>
</body>
</html>
Теперь между тегами создайте блок при помощи тега :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple text</title>
</head>
<body>
<div>
</div>
</body>
</html>
Тег является универсальным блочным элементом, и задает на веб-странице блок.
Пропишем в этом блоке элементы, которые присутствуют на макете, а именно заголовок и абзацы:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple text</title>
</head>
<body>
<div>
<h1></h1>
<p></p>
<p></p>
<p></p>
<p><em></em></p>
</div>
</body>
</html>
Самостоятельно добавьте текст между этими тегами.
Теперь в контейнере пропишите путь к файлу со стилями:
<link rel="stylesheet" href="style.css">
Создание левой панели
Во время вёрстки, но уже после отрисовки макета, выяснилось, что боковое меню ещё будет иметь подпункты, причём они должны появляться при наведении на главный пункт и исчезать, когда указателя на нём нет.
Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.
В файл CSS впишите следующий код.
#left
{
padding: 10px;
width: 237px;
padding-right: 1em;
}
#left h3
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}
#left ul {
margin: 0;
padding: 10px;
list-style: none;
width: 100px;
font-size: 18px;
}
#left li ul {
position: absolute;
left: 90px;
top: 0;
display: none;
}
#left ul li {
position: relative;
margin-bottom:20px;
}
#left ul li a {
display: block;
text-decoration: none;
color: #ffffcc;
background: #ff9900;
padding: 5px;
border: 1px solid gold;
border-bottom: 0;
}
#left li:hover ul {
display: block;
}
#left li li {
margin-bottom:0px;
width: 150px;
}
#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}
Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно. В контейнер left HTML-документа добавим сначала информационный блок без меню
В контейнер left HTML-документа добавим сначала информационный блок без меню.
<h3>Информация</h3> <p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br /> <h3>Меню</h3>
Белый фон распространился ещё ниже по странице.
Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.
-
Галерея
- Кухни
- Кровати
- Стенки
- Прихожие
- Шкафы-купе
- Компьютерные столы
- Договор
-
Прайс
- Кухни
- Кровати
- Стенки
- Прихожие
- Шкафы-купе
- Компьютерные столы
-
Образцы
- Стекло
- ДСП
- Фурнитура
- И т.д.
- Контакты
- Важно
Взгляните, как смотрится список. Многие могут подумать, что это таблица.
Подменю работает, надо только подвести мышку к пункту, его содержащему (у нас это Галерея, Прайс и Образцы).
Какие макеты мы ищем
Чтобы портфолио выгодно отличалось от конкурентов, а работа с макетами добавила полезные навыки в копилку опыта, желательно, чтобы эти макеты соответствовали следующим требованиям:
- Макеты на русском языке. Можно брать PSD и на английском, но большинство из них даже отдаленно не напоминают те макеты, с которыми потом придется столкнуться на практике. На Западе немного другой подход к дизайну. Кроме того, есть проблема со шрифтами, не поддерживающими кириллицу;
- Иметь соответствующую уровню навыков сложность. Поэтому необходим либо выбор из большого варианта макетов, либо они должны подбираться индивидуально.
С требованиями определились, а теперь конкретно по вариантам.
1. Редактор кода — думаю можно скачать бесплатно
Первая из программ для верстки сайтов, это редактор кода. В принципе подойдет любой из современных редакторов, ну т.е. я думаю, Вы логически уже пришли к тому что не стоит верстать на фрилансе или в офисе в стандартном блокноте windows или Notepad++. Все же перечислю те которые мне понравились:
- Atom
- Brackets
- Sublime Text 3
Сейчас по факту у меня на пк установлены три программы для верстки, — IDE Visual Studio Code, PHPStorm и Sublime Text. Саблайм хорошо выезжает на дополнительно установленных пакетах и темах. А вот PHPStorm, — умеет уже из коробки, то что обычно до устанавливаю на SublimeText3. Поэтому PHPStorm это мой основной редактор кода. Чаще всего на нем юзаю горячими клавишами:
- Выравнивание кода(как правило по ) ( выделяю всё crtl + A, выравниваю ctrl+alt+L)
- Поиск по всему проекту + найти и заменить (ctrl + shift +F)
- Найти метод или его использование ( ctrl + клик левой кнопкой мыши)
- Закомитить + запушить (ctrl + K ctrl + shift + K)
- Работаю с базой данных проекта (на правой стороне панели редактора)
- Обнять часть кода новым тегом html (ctrl +alt + J)
- Показать идентичные куски кода (ctrl + alt + shift + J)
- создание и использование сниппетов и пр.
А Sublime использую когда нужно что-то по быстрому открыть, не запуская тяжёловестную IDE.
Так же рекомендую быструю, бесплатную IDE Visual Studio Code, от microsoft. Эта ide работает тоже на всех операционных системах. Единственное что один день всё же прийдётся потратить на то, что бы выбрать плагины и настроить её под себя
Какой из способов выбрать?
Таблицы. В валидной верстке страниц таблицы не применяются. Они делают код грязным. Таблицы не так удобны в использовании, как может казаться. Если вы все еще не решили для себя, нужно ли использовать таблицы для макета страницы, то посмотрите на этот сайт.
Но они могут быть полезны, если речь идет о верстке электронных писем. Насчитывается не так уж много браузеров, которые люди используют в наше время, зато почтовых агентов просто огромное количество. Стационарные, онлайн и мобильные приложения используют различные движки отображения. HTML-таблицы выглядят одинаково во всех из них. Вот почему это отличный вариант для верстки электронных писем.
Float. Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear. Этого достаточно для начала.
Говоря о его недостатках, мы должны признать, что плавающие элементы привязаны к потоку документа, а это может существенно уменьшить его гибкость.
CSS-фреймворки. Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.
Флексбокс. Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.
Но, как я уже сказал, это относительно новая функция CSS. Поэтому нужно учитывать ее поддержку браузерами. Вот подборка ошибок, которые мне удалось найти, и возможные пути их решения.
Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!
Добавляем разметку HTML
Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.
Открываем наш текстовый документ index и вставляем в него следующий код:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <meta charset="utf-8" /> <title>Макет</title> </head> <body> <!-- Начало хидер --> <header class="header"> <div id="headerInner"> </div> </header><!-- Конец хидер --> <!-- начало врапер --> <section id="wrapper"> <div id="middle"> <div id="content"> <div id="colLeft"> </div><!-- Конец коллефт --> <aside id="colRight"> </aside><!-- Конец колрайт --> </div><!-- Конец контент --> </div><!-- Конец мидл --> </section><!-- Конец врапер --> <!-- Начало футер --> <footer id="footer"> <div id="footerInner"> </div><!-- Конец футериннер --> </footer><!-- Конец футер --> </body> </html>
Теперь давайте подробнее остановимся на коде.
Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.
Шапка сайта
За верх сайта у нас отвечает вот этот код:
<!-- Начало хидер --> <header class="header"> <div id="headerInner"> </div> </header><!-- Конец хидер -->
В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.
А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.
Середина сайта
За средний участок отвечает вот этот код:
<!— начало врапер —>
<section id="wrapper"> <div id="middle"> <div id="content"> <div id="colLeft"> </div><!-- Конец коллефт --> <aside id="colRight"> </aside><!-- Конец колрайт --> </div><!-- Конец контент --> </div><!-- Конец мидл --> </section><!-- Конец врапер -->
- id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
- id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
- id=»colLeft» — левая сторона сайта (Посты)
- id=»colRight» — правая сторона (Сайдбар)
Низ сайта
С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.
<!-- Начало футер --> <footer id="footer"> <div id="footerInner"> </div><!-- Конец футериннер --> </footer><!-- Конец футер -->
Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.
А как же мобильные?
Быстрое развитие веба и наличие разных устройств, на которых можно открыть сайт, побуждает к созданию адаптивных сайтов. Это значит, что мобильная или планшетная версия сайта может отличаться по внешнему виду, редко — по содержанию, от десктопной версии. Что мы получаем в папке с макетами? Еще пару папок с дизайном, заточенным под определённые разрешения. Например, для планшетов это может быть 780px по ширине, а для мобильных — 320px (цифры взяты неспроста — http://mydevice.io/devices/). Но стоит учесть следующее:
- Ширина окна браузера на планшетах может находиться в пределах от 600px до 1024px.
- У мобильных — от 320px до 504px.
О чём это говорит? Правильно, как верстать сайт, если ширина макета отличается от медиа-запроса под планшеты или мобильные телефоны. Ответ прост — если сайт предусмотрен с fluid (резиновой) вёрсткой, то проблем быть не должно; если используются фиксированные по ширине блоки под определённые устройства и их переходное состояние от дексктопа к планшетной версии не учтено и не согласовано с заказчиком в техническом задании, то этим стоит заняться до начала вёрстки, иначе проблем не избежать.
Как может выглядеть боль и отчаяние на примере (figure 2)
figure 2
Если заказчика устраивает тот факт, что блоки перестроятся на указанных break-points согласно дизайну, но в промежуточных вариантах что-то будет выглядеть не так, как на макете, то приступаем к работе. Если же он не согласен, можно предложить верстать на своё усмотрение или сразу определить внешний вид явных несоответствий.
