От автора: приветствую вас на страницах блога Webformyself. В сегодняшней статья я хотел бы затронуть тему, как делается в html дизайн для сайта и что такое вообще веб-дизайн.
Веб-дизайн и зачем он нужен
За свою деятельность в интернете многие из нас просмотрели тысячи сайтов абсолютно разных видов и тематик. Но запомнили вы наверняка только те, которые были действительно очень качественными, а самое главное, имели уникальный дизайн.
Конечно, в сети можно найти примеры очень плохих с точки зрения внешнего вида ресурсов, но ими все равно многие пользуются, потому что на них предоставлено много очень полезной информации. Однако если разрабатывать проект сегодня, в 2016 году, то абы какое оформление уже не прокатит.
Ну хорошо, не прокатит, а что это все значит? А то, что каждый качественный веб-ресурс должен иметь свой собственный, уникальный и неповторимый дизайн, какого нет ни у одного из других интернет-ресурсов. И только тогда он может навсегда заслуженно получить в сети видное место и обрасти горой постоянных посетителей.
Где создается внешний вид сайта
Простой ответ – в фотошопе или любой другой программе, где возможно нарисовать макет шаблона. И занимается этой работой веб-дизайнер.
Как вы понимаете, макет – это не просто картинка, а изображение с кучей слоев, на которых отображаются различные структурные элементы будущего проекта.
Так для чего же нам html?
Пока я ни одним словом не упомянул о html – языке разметки гипертекста. Он играет непосредственную роль в создании сайта. Дело в том, что нарисованный дизайнером макет является красивым прототипом будущего ресурса, но у него есть одна проблема – это картинка. Пусть многослойная, созданная не за один час, но картинка.
Тут и наступает час славы html, а также его неразрывного товарища css. Эти два языка, эти две веб-технологии позволяют из подготовленного макета создать полноценный интернет-ресурс.
А если я знаю html и css, могу ли я сразу начать верстку сразу, без дизайнера и макета?
Конечно. Только как вы себе это представляете? Как можно создавать интернет-ресурс, если вы даже не знаете, и не имеете ни малейших представлений, как он будет выглядеть.
Тут можно, конечно, работать таким образом: так, у меня будет зеленая шапка, синий сайдбар и красный футер. В основной части у меня будет три колонки, которые будут выводить три последний новости.
Это называется план. Без него просто невозможно начинать разработку. Но, в конце концов, без помощи дизайнера ваш сайт может выглядеть невероятно скудно. Например, вот вам пример верстки без макета.
Это – одна из моих первых попыток сверстать какой-нибудь шаблон. Мне хотелось сделать это без макета, просто следуя своим собственным идеям. Кстати, этот шаблон я не доверстал до нормального состояния.
Например, тут нужно было бы еще создать и оформить боковую колонку и саму статью, но даже если доработать верстку, то все равно тут видно, что дизайн сделан просто ужасно.
Стоит все-таки сказать, что если вам нужен очень простой сайт без графики, то вы вполне можете обойтись и без макета, просто хорошо продумав и спланировав будущий сайт. Во всех остальных случаях, да и вообще по-нормальному шаблон создается именно с макета, а не с головы верстальщика.
Как html помогает реализовать дизайн сайта?
Сам по себе html – это язык разметки гипертекста. В нем создается структура будущего шаблона, но не его оформление. За это ответственен язык css (cascade style sheets), в котором и записываются все отступы, цвета, границы и вообще все, что влияет на внешний вид.
HTML же формирует сайт. Чтобы вам было понятней, я покажу, как выглядит тема с полностью готовым оформлением с помощью css и без него.
Этот шаблон вы сможете сверстать в курсе по WordPress, ссылку на него я дам ниже. Тут видно, как все ровно и красиво выглядит. А теперь я просто специально сделаю ошибку в строчке, где подключается таблица стилей, так что она не подключится. И вот что получится:
Что тут сказать? Все развалилось, блоки стало в одну строку и это вообще никак не похоже на сайт, а скорее на случайное скопление текста и картинок. Да, css значит многое и работает он в связке с html.
Перенос дизайна html сайта на joomla или wordpress
Сверстав шаблон ни в коем случае нельзя сказать, что разработка сайта завершена и его можно начинать использовать. Конечно, это не так. Очень мало кто сегодня использует статичные html-сайты, подавляющее число людей управляют сайтом через специальные системы управления, потому что это очень удобно.
Самыми популярными среди веб-мастеров и владельцев интернет-ресурсов являются такие CMS (системы управления сайтами, а можно просто движки), как Joomla и WordPress.
И тут возникает справедливый вопрос: “А как же перенести готовую верстку в любой из этих движков, чтобы все начало работать и сайтом можно было управлять в удобном визуальном режиме?”
Вопрос очень хороший и ответ на него есть на нашем сайте. Здесь вы можете посмотреть описание нашего курса «JOOMLA-МАСТЕР: С НУЛЯ ДО ПРЕМИУМ ШАБЛОНА». Это отличное пошаговое руководство, благодаря которому вы сможете уяснить для себя процесс создания сайта для этой cms.
Точно такой же курс есть для WordPress. Это вообще самый популярный движок, но создавать реально качественные сайты на нем умеет не так уж и много людей. А это руководство научит вас не просто создавать темы для WordPress, но и адаптировать их под любые устройства, что особенно ценится сегодня.
Итог
Итак, в этой статье мы разобрались, что такое веб-дизайн и кто работает над проектом сайта в первую очередь. Также еще раз подчеркну, что в принципе, создать интернет-ресурс можно и самостоятельно без макета сайта если у вас нет серьезных требований к внешнему виду.
Ну и конечно, для работоспособности готовый шаблон обязательно нужно интегрировать в популярный движок, чему вы сможете научиться, просмотрев один из наших видеокурсов.
