Как разрабатывается собственный шаблон для сайта?Перед началом верстки стоит определиться: либо концепция бренда диктует внешний вид сайта, либо она подстраивается под готовый шаблон.
Во втором случае работа сводится к скачиванию готовых файлов, и здесь мало о чем можно рассказать… В этой статье речь пойдет о том, как самостоятельно спроектировать макет, исходя из потребностей сайта, и перенести его в HTML-формат.
Предварительные наработки
Сколько бы инструментов макетирования ни существовало (онлайн и настольные приложения), вы никогда не получите от них пользы, если не будете знать, что вам нужно. Главной ошибкой является спешка. Обычно новички устанавливают программу и тут же берутся создавать прототип. А когда половина работы выполнена, в голове возникают новые идеи, но чтобы их добавить, приходится двигать имеющиеся элементы макета, на что тратится значительная часть времени.
Перед тем как приступать к работе, нужно выписать на бумагу все мысли, относительно реализации задачи. Идеи могут всплывать в хаотичном порядке, и это нормально. Не пытайтесь структурировать их по мере поступления, просто записывайте каждую с новой строки. Почувствовав, что дополнить список больше нечем, прочитайте его сверху вниз. При необходимости, сделайте это неоднократно. Обычно, на данном этапе рождается что-то еще. Затем отложите лист в сторону, до следующего дня.
Вернувшись и взглянув на список еще раз, вы какие-то записи вычеркнете, какие-то перефразируете, и возможно добавите новые. В итоге, сами того не ожидая, увидите будущий проект так, как не видели его ранее. Появится чувство, похожее на вдохновение. Но не верьте всем своим фантазиям, и не замахивайтесь на труднодостижимые цели. Особенно, если этого не требуется для реализации основной задачи. Одним словом, трезво оцените свои возможности, и не распыляйтесь на выполнение лишних действий.
После того, как сформируется окончательное видение проекта, переходите к построению макета. Никто не сказал, что это обязательно на компьютере - не забывайте про бумагу, карандаш и ручку. Канцелярские принадлежности не так раздражают, как мышь с клавиатурой и программным интерфейсом, каким бы развитым последний ни был. Делая наброски, не стремитесь выводить слишком ровные линии – не тратьте время, достаточно таких, чтобы были отчетливо видны отступы, и сохранялись пропорции.
Кодируем, соблюдая порядок и правила
Нет универсального рецепта верстки. Некоторые верстальщики пишут код с нуля, другие используют фреймворки типа Bootstrap или Foundation, а третьи и вовсе берут за основу свои наработки и вносят в них изменения. Надежней всего начинать с чистого листа, но если собираетесь задействовать готовый код, то лучше учитывать это еще до прототипирования.
Пишут верстку обычно в кодовых редакторах (Sublime Text, Brackets, Notepad++) или в интегрированной среде разработки (IDE). Широкое применение получили WYSIWYG-редакторы, позволяющие видеть результат в процессе написания кода, а также программными средствами создавать этот код. Среди дополнительных функций, помогающих верстальщику, стоит выделить возможность подключаться по FTP и работать с файлами на хостинге для сайтов. Современные браузеры тоже оснащены своими инструментами, с помощью которых можно одновременно писать код и тестировать его.
Для того, чтобы экономить время, приучайтесь выполнять однотипные задачи. Например, подготовьте все изображения, опишите всю структуру на HTML, определите все классы, обозначьте их в таблицах стилей, а затем вписывайте параметры. Начните со стилизации шрифтов (заголовки, абзацы, списки и прочее), потом переключайтесь на фоновые заливки. Двигайтесь от корневого HTML-блока к деталям, не зацикливайтесь на мелочах, на них обращают внимание в последнюю очередь. При верстке нескольких страниц допускается весь HTML-код записать в один файл, а после разбросать его по отдельным.
При подключении JS-кода убедитесь, что полученный шаблон будет достойно смотреться без него. JS способен украсить сайт анимацией и придать ему интерактивности, послужить дополнением, но вешать на него задачи позиционирования, даже сегодня остается признаком плохого тона.
В конце работы проверьте свой код на валидность, грубые ошибки в синтаксисе иногда становятся причиной снижения рейтинга в поисковых системах. Вычистите шаблон от мусора (лишние строки кода, файлы с графикой), если таковой собрался.
МЕДИА ХИМИЯ, опубликовал запись 4 года назад.
С момента публикации зафиксировано 3130 просмотров. Сейчас эту запись просматривает 1 незарегистрированный пользователь.
|
|