Как сделать дизайн сайта

Дизайн сайта можно заказать, но это стоит денег. Чтобы качественно сделать самому, многие советуют изучать язык html, css, php.

Я за несколько минут в упрощенном варианте, научу вас сделать для себя красивый, неповторяющийся дизайн сайта, без этих знаний.  Вам потребуется изучить всего лишь несколько слов.

HTML –это язык который понимают браузеры. CSS – отвечает за стиль, точнее за вид. PHP – скрипты, которые будут выполнять поставленные задачи.


Как пример я возьму шаблон «twentyten» он идет вместе с движком вордпресс. Устанавливайте эту тему и переходите в панели управления по следующим опциям >> внешний вид  >> редактор.

Сразу хороший совет: в процессе изменений легко сделать ошибку, при которой сайт не откроется вообще.

Дизайн сайта

Поэтому сразу на компьютер устанавливайте программу FileZilla Client и скачивайте движок вордпресс.

Так вы сможете все в любой момент восстановить. Если сайт перестанет отвечать просто из скачанного вордпресс при помощи FileZilla Client заменяйте редактируемые файлы.

Итак запоминаем что в редакторе что обозначает. То что вам откроется, отвечает за дизайн сайта, точнее за его внешний вид, а за функциональность – php файлы, находящиеся с правой стороны:

Header —  отвечает за верхнюю часть сайта, по-другому называют шапка.

Sidebar – боковая колонка, в которую входят виджеты, по-другому блоки.

Footer – нижняя часть сайта, по-другому подвал.

Index – отвечает за вывод содержимого страниц, в основном главной.

Page – относится к статистическим страницам, таким как «об авторе», «контакты».

Single – при его помощи создаются дополнительные функции

Archive – за себя говорит само название.

Search – отвечает за вывод результатов поиска.

Functions — функции

Title – заголовок

Padding – пространство между бордюром и содержимым элемента.

Font-size — размер шрифта.

Line-height — высота строки.

Margin – отступ.

Width – ширина.

Color – цвет.

Text-decoration – текстовое оформление.

Clear – точно.

Right – вправо.

Float – позиция размещения.

Left – влево.

Background – фон.

center – центр
При помощи вот этих слов любой сайт можно изменить до узнаваемости. За размеры отвечают px, а за цвет-коды, которые можно найти, написав в поисковике «цвет код html».

Для изменения ширины страницы и заголовка редактируйте Functions.php и style.css.

Чтобы сделать хороший  дизайн сайта вам понадобятся свои изображения. Возможно, фотошоп окажется сложным.


Тогда воспользуйтесь программами pain и Banner Maker Pro. При их помощи можно создать практически любые картинки.

Ищите их в интернете, закрашивайте ненужные места, накладывайте на них свои и так далее.

Все довольно просто, только нужно немного поэкспериментировать. Если возникнет желание, могу предоставить более подробную информацию.

Пишите в комментариях. Об других изменениях касающихся стандартного шаблона расскажу в следующих статьях.

Комментарии 5

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

  • Чтобы ответить конкретно нужно больше информации. В ощих чертах можно сказать следующее. Зайдите в панель управления блога, подведите стрелку мышки к «внешний вид» и нажмите редактор. Для подвала поексперементируйте с % в блоке Footer, для заголовка с px в блоке Header. Очень многое зависит от установленой темы, для точного ответа нужно больше информации. Вам нужно % и px. уменьшать (за каждым разом внизу нажимать обновить) и обновляя главную страницу, смотреть что получается. Для новичков это самый лучший способ, называеться методом проб.

  • По поводу двойной шапки. Та что в центре — это логотип, а побольше уделенное место для шапки, его необходимо уменьшить.

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

  • Есть такие конструкторы (программы), что созданный сайт сразу загружают на сервер, тебе лишь надо вести правильный логин и пароль ftp.

Добавить комментарий