Делаем свой первый сайт!

Итак. Чтобы создать хороший сайт, да и вообще обучиться верстке сайтов, нам нужен хороший html-редактор. Самый оптимальный на мой взгляд - Adobe Dreamweaver CS5. Также советую скачать несколько видеоуроков для наглядности.

Первое, с чего всегда нужно начинать - создание нового документа.

Шаг 1: Создаем шаблон.

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

Шаг 2: Редактируем шаблон.

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

Для удобства добавьте в избранное этот html/css справочник http://htmlbook.ru/

Там Вы будете подсматривать синтаксис и допустимые значения html/css-тегов.

Для начала создадим область редактирования:

Выберите основной контейнер (самый большой блок, в котором будет только текст, который Вы будете добавлять), затем зайдите в радел меню "Общий" и внизу (предпоследний) будет пункт "Шаблоны". Нажмите на стрелочку в левой части и выберите "Изменяемая область". Теперь при создании страниц по данному шаблону, Вы сможете редактировать в них только тот контейнер, который Вы указали в шаблоне. Вы всегда можете добавить/удалить редактируемую область.

В боковой блок можете добавить меню (Макет - Панель меню Spry). После добавления выберите этот объект и в нижней части экрана появится редактор пунктов меню. Настройте его и приступите к созданию шапки (верхний) сайта. Туда Вы можете поместить изображение или, хотя бы, информацию, коротко описывающую тему о которой Вы будете вести речь.

И в конце можете написать пару строк о себе в футере (нижнем контейнере). Так же рекомендую добавить туда счетчик посещаемости http://www.liveinternet.ru/.

По окончанию всех вышеописанных действий, создайте сайт:

В главном меню программы (горизонтальном) нажмите "Веб-сайт" - "Новый сайт". Заполните имя сайта и папку, в которой будут находиться локальные файлы.

Затем нажмите "Сохранить", после чего сохраните  Ваш шаблон.

Шаг 3: Создание страниц по шаблону.

В дрим вивере нажмите "Файл" - "Создать", дальше выбираем раздел "Страница из шаблона" - имя Вашего сайта - имя шаблона. Это будет главной страницей, поэтому сразу же сохраните ее под именем "index.html".

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

Помните: редактировать на каждой такой страницы Вы можете только ту область, которую пометили в шаблоне как "Редактируемую".

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

Удачи друзья! :)