Дизайн сайта в html и css

Сегодня уже практически невозможно встретить человека, которому незнакомы слова: сайт, html, css и т. д. Но, большинство людей, хоть и знакомы с веб-документами, считают, что создать их самостоятельно им не под силу. На самом деле, создать свой простой дизайн сайта в html css очень просто, нужно лишь следовать простой инструкции в несколько шагов.

Шаг 1. Поговорим об инструментах

Если вы хотите сверстать хороший сайт, вам понадобятся хорошие инструменты. В первую очередь, это специальный текстовый редактор. Самый распространенный и удобный вариант Notepad++, это продвинутый вариант блокнота, к тому же совершенно бесплатный и постоянно совершенствующийся. Скачайте его с официального сайта и установите на свой компьютер. Для верстки на html css это всё, что понадобится.

Шаг 2. Предварительный рисунок

Для того чтобы сверстать дизайн сайта html, необходимо для начала определиться с тем, где и как будут располагаться элементы на веб-странице. Предположим, что у вас стандартная разметка: шапка сайта, центральная часть и подвал. Они будут заполнены соответствующими цветами и картинками. К примеру, шапкой будет выступать картинка, фон и футер (подвал) будут оформлены соответствующим цветом.

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

Шаг 3. Создаём html файл

Создайте новый файл в текстовом редакторе и для начала впишите стандартные теги для структуры html документа. Чтобы сразу увидеть какой-нибудь результат, между тегами <body></body> можно написать традиционное Hello World! Не забудьте сохранить файл со специальным разрешением .html.

Теперь добавляем основные элементы страницы в тегах <div></div>. Для начала их можно обозначить по мету расположения:

<div>Шапка</div>

<div>центральная часть</div>

<div>Подвал или футер</div>

Теперь, когда у нас готова предварительная разметка, можно приступить к формированию файла css.

Шаг 4. Дизайн сайта css

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

body {background-color: #F5F5DC;}

После чего сохраняем файл в той же папке, что и нашу html страничку, но расширение уже выбираем .css.

Шаг 5. Подключение файла

Теперь подключаем файл css на нашей странице. Сделать это очень просто: между тегами <head></head> вставьте следующую строку:

<link rel="stylesheet" href="НАЗВАНИЕ_ФАЙЛА.css">

После этого сохраняйте внесенные изменения и любуйтесь результатами в вашем браузере.

Шаг 6. И фона бежевого мало

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

Выберите любую понравившуюся картинку и поместите её в ту же папку, где находятся ваши html css файлы. Скопируйте название и переходите к файлу css. Представьте, какой "якорь" или "флажок" можно придумать для нашей шапки? Напишем традиционный header и поставим перед ним шарп # - это обозначение id. Якорь id - это уникальное определение элемента на странице, проще говоря на странице может быть только один элемент с таким id. Для class все по другому: элементов может быть хоть 100, хоть 1или даже совсем не быть. Header у нас один, потому и выбираем id.

#header{background: url(название_картинки.jpg); height: 200; width: 100%; margin: 0 auto auto auto;}

Добавьте эту строку и сохраните файл. Перейдите к файлу html и там, где у нас находится элемент "Шапка", внесите следующие изменения:

<div id="header">Шапка</div>

После сохранения файла, обновите или снова откройте страницу и увидите выбранную вами картинку на странице. Теперь вы знаете как можно вставить картинку (background: url(название_картинки.jpg)) конкретного размера (height: 200; width: 100%;) в конкретном месте страницы (margin: 0 auto auto auto;) и сможете подобрать подобные настройки для остальных элементов на странице.

Убедитесь сами в том, как просто создавать уникальные и очень красивые простые сайты на html и css.