Логин: Пароль:
Забыли пароль?Зарегистрироваться
4108

Как разрабатывается собственный шаблон для сайта?

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

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

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

Предварительные наработки

Сколько бы инструментов макетирования ни существовало (онлайн и настольные приложения), вы никогда не получите от них пользы, если не будете знать, что вам нужно. Главной ошибкой является спешка. Обычно новички устанавливают программу и тут же берутся создавать прототип. А когда половина работы выполнена, в голове возникают новые идеи, но чтобы их добавить, приходится двигать имеющиеся элементы макета, на что тратится значительная часть времени.

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

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

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

Кодируем, соблюдая порядок и правила

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

Пишут верстку обычно в кодовых редакторах (Sublime Text, Brackets, Notepad++) или в интегрированной среде разработки (IDE). Широкое применение получили WYSIWYG-редакторы, позволяющие видеть результат в процессе написания кода, а также программными средствами создавать этот код. Среди дополнительных функций, помогающих верстальщику, стоит выделить возможность подключаться по FTP и работать с файлами на хостинге для сайтов. Современные браузеры тоже оснащены своими инструментами, с помощью которых можно одновременно писать код и тестировать его.

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

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

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


МЕДИА ХИМИЯ, опубликовал запись 4 года назад.
С момента публикации зафиксировано 3130 просмотров.
Сейчас эту запись просматривает 1 незарегистрированный пользователь.
Добавить фото Добавить файл
МЕДИА ХИМИЯ

МЕДИА ХИМИЯ [MediaHim.com] - группа отраслевых информационных ресурсов, специализирующихся на таких тематиках, как нефтехимия, финансы, строительство, а также ряде смежных областей.
Регистрация на проекте: 31.10.2018
Написал комментариев: 16
Записей в блоге: 2548
Подписчиков: 4108
Сайт: mediahim.com

Содержание блога:
 Forex Magazine © 2004-2024