• Free consultations 24/7
  • Иконка телефона +1 (310) 933-4443
    Поддержка: Онлайн

    Ждем вашего звонка :)

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

    Поддержка: Офлайн

    Будем онлайн через: 2h 34 min

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

Шапка с «помпоном» для сайта!

А вы пробовали  самостоятельно сделать для своего сайта шапку? Если нет, то мы расскажем кое-какие интересные факты, впрочем, если не получится, вы всегда знаете, к кому обратиться за помощью.

Шапочные советы

Для того чтобы создать яркую, функциональную и удобную «шапку» для разрабатываемого сайта, следует руководствоваться следующими моментами.

Разведка обстановки

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

Файловая атака

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

Header, о котором хочется говорить!

После того, как прошло ознакомление с файловой структурой следует приступить к созданию файла header, именно так называют верхнюю часть сайта. Для начала продумайте, какие элементы нужно расположить в «шапке сайта». Обычно там располагаются, ячейка для поиска, панель для входа зарегистрированных пользователей, логотип и меню управления сайтом. Можно добавить дополнительные элементы по собственному желанию, например, RSS.

Дизайнерские опусы

Далее займемся дизайном. Выбираем ширину для сайта, рекомендуется использовать процентное значение, в последнее время большинство сайтов работаю именно в таком стиле. Выбрав значение ширины, начинаем рисовать верхнюю часть сайта в любом графическом редакторе, для этого идеально подходит Photoshop. Идеи для дизайна «шапки» можно взять на других сайтах, связанных с веб-дизайном.

Кодовый «замок»

Закончив с рисованием, переходим к написанию кода, для этого понадобиться язык html. Создаем обычную htmlстраницу и пишем на ней обычный код, при этом желательно пользоваться специальными программами, например Dreamweaver. Далее создаем каскадную таблицу стилей – css, где прописываем главный стиль пока только применимый к разрабатываемой «шапке». В файле с шапкой необходимо создать несколько контейнеров, при помощи тега <div> в которых нужно поместить небольшие программы на языке php, они будут играть роль элементов сайта. При помощи них будут подключаться к нашему файлу с верхней частью сайта всевозможные элементы дизайна. Так же в созданных контейнерах можно подключать различные стили css, например, для создаваемых кнопок. Закончив работу над файлом header, прописываем в нем генеральный стиль css, это необходимо, что бы верстка осуществлялась без излишних проблем.

После завершения работ над файлом header используем команду языка php«<?php get_header(); ?>», которая позволяет подключить созданную нами верхнюю часть сайта к основному содержимому сайта. Именно по такой схеме строятся все современные сайты и благодаря, которой обеспечивается их быстродействие и функциональность.

Стоит добавить, что остальные элементы сайта создаются подобным образом и также подключаются при помощи языка php.

Если все написанное выше показалось вам страшным сном — то может, стоит подключить к работе профессионалов?

Posted on 08.08.2012

Category: Дизайн web-сайта, Разработка (html5, css и т.п.)

Article tags

Вы дизайнер?

Join Us

всего в сообществе

~150.1k дизайнеров


Related Articles

Я в дизайнеры пойду. Пусть меня научат

Дизайн web-сайта

Конечно, учиться этому благому делу нужно, а, главное, перспективное это начинание. Хороший дизайнер никогда...

Создавать уникальные иконки – с нами просто!

Дизайн web-сайта

Многие восхищаются корпоративной символикой известных банков, салонов и т.д. Их изображения, идет ли речь...