Как создать шапку для сайта.

Создадим шапку для сайта.

В этом уроке мы с Вами создадим шапку для сайта. И сделаем это двумя способами. Первый способ является простым, но менее эффективным. Второй способ позволит усилить внимание посетителя на Вашем сайте, но данный способ потребует от Вас больше времени, больше знаний, больше фантазии.

Как правило большенство новичков пользуются первым способом, так как он является самым простым, но довольно примитивным. Мой совет: если Вы не умеете пользоваться различными программами, например "Adobe Photoshop" с помощью которых можно сделать красивую шапку, а потом ее сохранить для своего сайта. Пользуйтесь первым способом, который будет описан ниже. Если Вам например знакома программа "Adobe Photoshop" и являетесь ее поклоником, то лучше воспользоваться данным способом создания шапки для сайта.

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

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

Сейчас я пользуюсь программой Adobe Photoshop так, как я научился ею пользоваться и теперь уже не представляю свою работу без данной программы. Данная программа очень класная, но довольно сложная в освоении. Но поверьте изучить данную программу можно даже нужно и потом Вы поймете мощь данной программы.

Как создать шапку для сайта я сейчас на примерах Вам покажу и подробно опишу данные действия. Данный этап позволит внести душу на Ваш сайт.

Первый способ: как создать шапку для сайта.

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

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

В первом способе создания шапки мы возьмем уже готовое изображение, которое нам нужно будет вставить в код главной страницы сайта. Это изображение я взял из того же интернета и немного подработал в программе "Adobe Photoshop".

Для того чтобы увидеть все исходники картинок, скачайте себе архив на компьютер ( ссылку на архив я выложил Вам в конце урока). Потом откройте данный архив и скопируйте все изображения которые находятся в данной папке и вставте их в Вашу папку с изображениями на Вашем сайте. Перейдите в программу Dreamweaver и откройте вкладку "Файлы". Нажмите мышкой дважды по папке с изображениями (если данная папка у Вас закрыта) и в этой папке должны появиться те самые исходники изображений которые Вы с качали. Если там пустая папка то побробуйте нажать на обновить окно в верху данного окошка либо нажать F5. И так для первого способа на понадобиться вот такое изображение.

шапка сайта для первого способа

Данное изображение не будет изменятся и его мы будем вставлять в наш код как есть. Это будет нашей шапкой сайта которую нужно будет вставить лишь в наш код сайта. Размеры данной шапки будут 900 px по ширине и 250 px по высоте строки Вашего каркаса сайта, который мы с Вами создали в прошлом уроке. Важное замечание (ширина строки каркаса сайта должна быть либо равна ширине Вашей шапки сайта либо должна быть больше, но не как не меньше. Запомните данное замечание. Вы же не положите большую вещь в меньшую).

И так для того чтобы вставить данное изображение себе на сайт нужно сделать несколько действий. В открытой папке с изображениями найдите файл с названием KOTIKI.JPG и перетащите данное изображение не отпуская левую кнопку мыши в первую строку Вашего каркаса. После этого в каркасе Вашей созданной таблицы должно появиться изображение с кошечками как показано выше.

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

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

Теперь можно приступать ко второму способу создания шапки для сайта.

Второй способ: как создать шапку для сайта.

В этом способе мы с Вами будем создавать шапку сайта сами с нуля. Для создания данной шапки нам понадобяться несколько изображений, которые так же можно взять из интернета либо где Вам угодно. Данные изображения мы будем слеплять в единое целое.

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

В этом примере мы рассмотрим создание шапки сайта с помощью программы "Adobe Photoshop". Изучать данную программу в этом урооке мы не будем, так как она большая по функциональности и рассказать все про данную программу в этом уроке я не смогу. Про эту программу я расскажу в других уроках и статьях. Здесь я покажу только те действия ( самые простые так как в этой программе мы задействуем только несколько инструментов) которые нам будут необходимы для создания логотипа для сайта.

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

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

Пример создания шапки сайта в строгой последовательности.

первый образец созданной шапки сайта
второй образец созданной шапки сайта
третий образец созданной шапки сайта
четвертый образец созданной шапки сайта
пятый образец созданной шапки сайта
шапка сайта для второго способа

Для этого урока Вам потребуется программа "Adobe Photoshop". Если данной программы у Вас нет то можете скачать ее в интернете. Если Вы не хотите пользоваться данной программой то можете выбрать другую по своему вкусу.

После того как Вы запустите программу, в верху данной программы Вы увидите такую строку меню.

панель меню в фотошопе

В этой строке выберети меню "Файл" и в выпадающем меню нажмите на меню "Создать". После у Вас появится вот такое окно.

новый документ в фотошопе

В этом окне можно делать изменения на Ваше усмотрение, но в данном случае на волнуют данные настройки, которые показаны на изображении. Сделайте все так как показано на снимке и нажмите "ОК". Далее у Вас появится рабочая область в которой и будет происходить весь процесс создания шапки сайта.

Теперь в том же меню "Файл" выберете меню "Открыть" и откройте то изображение которое показано на образце 1 с девушкой с бутербродом в руках.

После нажмите на данный значек перетащить в панели инструментов слева программы и не отпуская левую кнопку мыши перетащите данное изображение в окно нового документа. Данное изображение в этом окне появиться слишком большое. Чтобы уменьшить данное изображение в этом документе нужно найти границы данного изображения, которые будут выделены рамкой. После подведите мышку к любому удобному Вам углу и при нажатии на данный угол уменьшаете данное изображение, при этом нужно держать нажатую кнопку Shift на клавиатуре, чтобы картинка не меняла свои пропорции качества. После уменьшения картинки, перетяните данное изображение в то место как показано на образце 1.

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

После того как Вы создадите шапку сайта. Сохраните ее в папке с изображениями в корне Вашего сайта и перетащите данную заготовку в свой каркас сайта в нужное место.

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

Спасибо Вам за внимание и надеюсь на понимание ко мне за проделанную работу.

Ссылка на скачивание архива.

архив с исходниками для скачивания

Данный урок завершен и переходим к следующему уроку в котором мы создадим главное меню для сайта.

Наверх

Видео на тему: Как создать шапку для сайта.

Другие страницы сайта:

Яндекс.Метрика