— сайт визитка · · · · · · · · · · от 5 тыс.
— экспресс сайт · · · · · · · · · · · · · от 7 тыс.
— интернет-магазин · · · · · · · · · · от 10 тыс.
— корпоративный сайт · · · · · · · · · · от 14 тыс.
Материалы

Как сделать верстку сайта

17/12 2014

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

Основные шаги при создании сайта:
1. Наброска плана;
2. Макет сайта;
3. Сохранение отдельных элементов;
4. Написание файла на языке HTML.

Рассмотрим эти шаги более подробно

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

Красивый внешний вид сайта — залог успеха

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

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

Похожие статьи: