Создать сайт самому? Не проблема! Все о создании сайтов – как создать дизайн сайта, верстка сайта, уроки HTML, сайт на WordPress, как выбрать хостинг сайтов

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

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

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

Итак, загрузим в Dreamweaver созданную нами главную страницу, которая называется index.html. Идем в главное меню Файл (File) – Сохранить как (Save As...) и сохраняем файл под именем black.html (черный), по названию первой строчки меню. Удалим правую колонку (колонка2). Выделяем ее, щелкнув левой клавишей мышки на контуре контейнера, и жмем Delete. Создадим стиль для зоны основной информации, назовем его main1:

Все настройки такие же, как и стиле main, только в категории Рамка (Box), ширина не 590 а 800 пикселей. Привяжем стиль к контейнеру зоны основной информации. Заменим текст на любой другой, только заглавие сделаем – Арабские черные, для наглядности, а в левой колонке, над меню, вставим надпись На главную, ясно зачем? Чтобы можно было с любой страницы вернуться на главную страницу. Определим надпись как заголовок 4 уровня:

Проверте браузером. Подходит? Сохраните страницу

Итак, страницу black.html мы создали. Но таких страниц в сайте может быть очень много! И что, вот так возиться с каждой? Так это одуреть можно! Редактор Dreamweaver дает нам возможность существенно облегчить себе работу, создав шаблон страницы. Ну, так давайте и сделаем  шаблон страницы нашего сайта.

Откроем в редакторе страницу black.html.
Оставим на странице ее неизменную часть. Для этого просто удалим информацию из зоны основной информации. Контейнер зоны основной информации должен быть пустой. Для этого просто выделим текст и нажмем Delete.

Дальше в главном меню идем в Файл (File) – Сохранить как шаблон (Save as Template). В появившемся меню, в окошке Сохранить как (Save as), сохраняем шаблон страницы, но перед этим задайте имя шаблона, какое захотите, например так:

Жмем Сохранить (Save). На вопрос Обновить ссылки? – отвечаем Да. В нашем сайте появилась папка Templates. Это еще не все. Нужно задать редактируемые области. Такой у нас будет зона основной информации. Выделим контейнер зоны основной информации. В главном меню идем в: Вставка (Insert) – Объекты шаблона (Template Objekts) – Редактируемая область (Editable Region ). В появившемся окошке жмем ОК:

Сохраняем шаблон страницы.  В главном меню Файл (File) – Сохранить как (Save as...)– Сохранить (Save). Страницу black.html удаляем. Для этого в панели Файлы:

Щелкнем правой клавишей мышки на названии файла — black.html. В выпадающем меню выбираем Редактировать (Edit) – Удалить (Delete) и жмем Да. Теперь у нас есть только главная страница, а мы, используя созданный шаблон страницы, создадим еще две, следующие страницы. Первая у нас будет удаленная страница black.html, со статьей Арабские черные, а вторая – со статьей Арабские зеленые.

Запускаем редактор. Щелкаем на кнопке Больше (More) в колонке Создать из шаблона (Create New). В левой части появившегося окна выбираем Страница из шаблона (Template page) и жмем Создать (Create). Видим наш шаблон страницы.  Заполняем зону основной информации текстом, рисунками, фотографиями — в общем, всем, что вам нужно, пишем заглавие — Арабские черные. Сохраняем страницу под названием black.html.

Чтобы создать следующую страницу, у нас это Арабские зеленые, загрузите шаблон, так же как и для страницы black.html. Напишите заглавие, вставьте текст, рисунки и.т.д.

Вот мы и разобрались, как создавать шаблон страницы сайта и саму страницу. Сохраните созданную страницу под именем green.html. Теперь мы имеем главную страницу – index.html и две следующие — black.html и green.html. Между собой эти страницы связываются с помощью, так называемых гиперссылок.

Чтобы понять, что это такое – читаем статью Связываем страницы сайта. Гиперссылки