Как сделать шаблон страницы сайта | Как создать свой сайт

Как сделать шаблон страницы сайта в редакторе Dreamweaver

Июн-1-2009 Автор: VeryOldMan

В этом уроке создания страницы сайта в редакторе 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. Между собой эти страницы связываются с помощью, так называемых гиперссылок.

Чтобы понять, что это такое – читаем статью —  Создание гиперссылок на сайте в Dreamweaver






10 комментариев
  1. Алексей Пишет,

    Здравствуйте.

    Я зашёл как сказано, создал из шаблона. Теперь редактировать страницу вообще не могу, что делать? Что я не так сделал?

    Спасибо

  2. Марат Пишет,

    «Я зашёл как сказано, создал из шаблона. Теперь редактировать страницу вообще не могу, что делать? Что я не так сделал? »

    Алексей, сам столкнулся с такой проблемой.

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

    Надеюсь это поможет кому-то 🙂

  3. VeryOldCat Пишет,

    Если сможете сделать шаблон WordPress

  4. Артём Пишет,

    Скажите пожалуйста,а этот сайт можно будет потом перенести на WordPress движок?

  5. VeryOldCat Пишет,

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

  6. VeryOldCat Пишет,

    Проще WordPress

  7. Артём Пишет,

    Я хочу создать свой сайт, но всё выучит нереально для меня. Подскажите пожалуйста

    как лучше создать свой сайт,В Dreamweawer, или WorldPress??

  8. Артём Пишет,

    Можно еще один вопрос ? Если делать сайт на WorldPress, нужно ли его верстать в Dreamwreawer? Я просто учу всё что на вашем сайте но не пойму как это всё сложить

    в одну кучу.

  9. Артём Пишет,

    Спасибо, Я создавал сайт в редакторе Dreamweawer3 на Денвере что мне с этим дальше делать?Скажите пожалуйста?

    Просто посмотреть что получилось…

  10. ВАСИЛИЙ Пишет,

    ВСЕ ХОРОШО. СОЗДАЛ САЙТ НА ОСНОВЕ СЛОЕВ. ОДИН ВВЕРХУ, ДЛЯ ЗАГОЛОВКА, ДВА НИЖЕ. ОДИН ДЛЯ ОГЛАВЛЕНИЯ И ОДИН ДЛЯ ОСНОВНОГО ТЕКСТА. НЕ ПОЛУЧАЕТСЯ ПОЛЬЗОВАТЬСЯ ЯКОРЯМИ ДЛЯ ПЕРЕХОДА МЕЖДУ СЛОЯМИ. УСТАНАВЛИВАЮ ССЫЛКИ, А ОНИ РАБОТАЮТ ТОЛЬКО НА ОДИН СЛОЙ. НЕ ЗНАЮ, КАК СДЕЛАТЬ ЧТОБЫ ПЕРЕКЛЮЧАЛИСЬ

Добавить комментарий