Мы подготовили страницу к тому, чтобы сделать из неё шаблон в программе к Dreamweaver.
Немного вспомним, что я уже писал про шаблон в Dreamweaver. Когда вы , н-ое количество страниц, к созданному шаблону, и потом измените его, то все страницы изменяться вслед за шаблоном!
Единственное место, которое не изменится – это редактируемая область! Там может находится оригинальный текст, либо любая другая уникальная информация.
Как сделать редактируемую область в Dreamweaver.
Количество редактируемых областей неограниченное и вы можете установить такие области где угодно.
Мы же будем создавать редактируемую область в районе, где у нас будет основной текст!
Открываем подготовленную в программе Dreamweaver.
Если у вас нет текста, то вы просто наведите мышку туда, где у вас будет редактируемая область. У меня есть текст, я его выделяю. Нажимаем , - далее – шаблоны – новая редактируемая область.
В новом окне назовите вашу редактируемую область. Я не применяю для этого текст, а просто ставлю цифру. Для текста на всех сайтах цифра 2. А для заголовка делаю отдельную редактируемую область №1 – почему так? Не знаю, просто изначально так повелось.
В принципе и заголовок и текст можно сделать в одной редактируемой области!
Смотрим, что у нас получилось.
Здесь мы видим, что в созданной нами редактируемой области №2 есть текст.Эту редактируемую область можно увидеть только в программе, в браузере её не видно!
Когда вы сохраняете первый шаблон, то автоматически создается папка для хранения шаблонов, которая будет называться - Templates.
Открывается новое окно, где:
Сайт – сайт
Существующие шаблоны – у меня уже есть шаблоны, а у вас, если это первый шаблон, то окно будет пустое.
Описание - всегда оставлял его пустым.
Как назвать шаблон в Dreamweaver?
Почему возник такой вопрос? Если вы собираетесь делать сайт на различные темы, либо у вас будут различные под рубрики, то и шаблоны, наверное, будут отличаться. У меня много тем – поэтому много шаблонов. Каждый шаблон отличается от своего собрата верхней строкой, первая строчка на странице указывающая, где вы находитесь.
Каждый из шаблонов должен как-то называться. Название шаблона будет отображаться в коде. Как это название будет отражаться на оптимизации вашей страницы – сложно сказать, но мне кажется, что если будем называть шаблон в соответствии с темой, которую вы собираетесь разрабатывать, то это будет лучше, чем назвать шаблон номером или безликим словом.
Рассмотрим пример, если вы сейчас нажмете сочетание клавиш ctrl + U, то увидите код.
Это вторая строчка, и мы видим, что наш шаблон называется –« Всё о программе Dreamweaver.dwt»
Шаблоны Dreamweaver решают проблему, с которой сталкиваются многие компании – как поддерживать сайт и оставлять стандартные разделы стандартными. Обычным решением является использование SSI (Серверные вставки), но не все веб-сервера поддерживают эту технологию. Есть другие способы, посредством которых можно включить один html-файл в другой, но все они используют или программы на стороне сервера, или java-скрипты на на стороне пользователя.
Шаблоны Dreamweaver позволяют создавать шаблон страницы, который постоянно находится в одной области вашего сайта, и в последующем создавать другие страницы, основываясь на этом шаблоне. Потом, при внесении изменений в шаблон, изменятся также страницы, использующие шаблон.
1. Начинаем с макета
Самый простой способ создания шаблона на Dreamweaver – начать с макета, на основе которого вы хотите создать шаблон. Я использую усовершенствованную версию бесплатного шаблона: слева – навигация, вверху – шапка, а также фото и цвета.
Так как существует возможность создания шаблона Dreamweaver с нуля, многие считают, что легче сначала сделать дизайн, а потом решить, что в нем будет изменяться, а что будет частью шаблона.
Примечание. Шаблоны Dreamweaver создаются как часть сайта Dreamweaver. Если у вас не определён ни один сайт, вам нужно создать сайт в Dreamweaver перед созданием шаблона.
3. Сделайте описание шаблона
Выберите сайт, на котором вы хотите использовать шаблон. Я буду его использовать на сайте «Dreamweaver Examples». Название вашего сайта будет отличаться.
Опишите шаблон. Описание может быть настолько коротким или длинным, насколько вам это необходимо. Однако не скупитесь на детали, они могут быть важными в будущем.
4. Создание папки для хранения шаблонов
У моего сайта уже есть папка для шаблонов. Но если её не было, Dreamweaver автоматически создаст такую.
Все шаблоны Dreamweaver хранятся в папке «templates» на вашем сайте, и имеют расширение *.dwt (сокращенно от Dreamweaver Template).
5. Начинаем добавлять редактируемые области
- Выберите часть текста, которую хотите сделать изменяемой.
- Перейдите в пункт меню Вставка — Объекты шаблона.
- Выберите «Редактируемая область».
Есть и другие объекты шаблона, но они выходят за рамки данного урока.
6. Задайте имя Редактируемой области
Вы можете оставить имя, которое Dreamweaver задал по умолчанию, но я рекомендую задать описывающее имя, что позже напомнит вам, какая именно информация должна содержаться в этой области.
7. Редактируемые области в блочных элементах
Если вы попробуете разместить редактируемые области внутри блочных элементов (таких как заголовок, параграф), Dreamweaver выдаст предупреждение. Если вы оставите область внутри блочного элемента, ваши авторы контента не смогут внедрить туда какие-либо другие HTML-элементы.
Я использую это, когда хочу убедиться, что заголовок останется заголовком, или необходимо конкретное количество параграфов или других элементов в шаблоне.
Если вы решили оставить возможность добавлять другие блочные элементы внутри данного элемента, тогда вам нужно перенести границы редактируемой области за теги элемента. Вы можете это сделать в режиме отображения HTML-кода, или заново указав область, предварительно её удалив.
В готовом шаблоне редактируемые области выделяются рамками, над которыми будет имя области.
9. Создаем страницу на основе шаблона
Как только вы сохраните шаблон, можете его использовать на сайте:В меню Файл выберите «Создать»;
- Перейдите ко вкладке «Страница из шаблона»;
- Выберите созданный шаблон;
- Удостоверьтесь, что выбран пункт «Обновлять страницу при изменении шаблона»;
- Нажмите «Создать».
Теперь вы можете вносить изменения, но только в редактируемые области. Dreamweaver не позволит вам изменять другие части шаблона.
10. Измените шаблон – обновите файлы
Если позже вам необходимо внести какие-то изменения в шаблон, отредактируйте файл dwt в папке «Templates». Как только вы сохраните изменения в шаблоне, Dreamweaver спросит не хотите ли вы обновить страницы, созданные на основе шаблона. Он также укажет, какие это файлы.
Как только вы кликните «Обновить», все файлы, созданные на основе этого шаблона, будут обновлены. Вам только остается сохранить их и загрузить на веб-сервер.
Добрый день
Все мы знаем, что уникальный шаблон хорошо воспринимается поисковиками.
Так вот, сегодня я хочу поговорить о том, как написать свой собственный шаблон с помощью программы Adobe Dreamweaver
Эта программа платная, но если поискать в гугле то можно найти и бесплатную версию(не демо),
Adobe dreamweaver cs6 + кряк
Как только скачали и установили, думаю можно начинать
Перед тем как начать, создайте где нибудь папку для сайта,туда будем сохранять наши файлы. И сразу создайте папку для картинок
В главном меню выберите HTML
Перед вами появится исходный код документа.
Title
- нужен для отображения названия сайта в браузере. Туда пишем название нашего будущего сайта. К примеру я сейчас буду создавать сайт на тематику туризм. И согласитесь, цены за клик в контекстных рекламах туристических тематик выше чем у тематик кино или спорт. Конечно с моей стороны нехорошо делать сайт исключительно для заработка, но я постараюсь сделать наполовину СДЛ. Сама статьи не пишу, буду только заказывать. Но тематика ТУРИЗМ слишком обширная, так что мой сайт будет о конкретной стране, то есть об Италии
. Вот что у меня получилось
Body - это тело сайта, ставим между ними курсор, нажимаем на "Вставка ", в нем на "Таблицы " . Тут можно выбирать количество строк и столбцов.
С помощью таблицы мы разделим наш сайт на разделы (шапка, меню, подвал, основа) . У меня каркас будет простым. Если сумеете сразу разобраться можете выбрать сложный путь. Вот как я разделила мой будущий сайт:
Сначала задала 2 столбца и 3 строки, а потом верхние 2 и нижние 2 ячейки объединила. Для этого зашла в "Дизайн
" . Выделила с помощью кнопка "ctrl
" 2 ячейки, и правой кнопки мыши "таблицы
" => "объединить ячейки
"
Вот что у меня получилось в разделе "Код
"
width - ширина, поставил 1115 , шапка тоже будет такого размера
height - высота, 100% , на весь экран
border - пусть пока стоит 1, чтоб мы видели границы. Потом когда все закончите можно изменить его на 0
Хочу выделить одну из преимуществ программы, когда начинаешь писать какой нибудь тег выскакивает подсказка, и там можно сразу выбрать тот тег и вставить.
Один раз сохраните как index.html
. Мало ли что, свет выключат ошибку какую нибудь выдаст...
Теперь давайте начнем наполнять сайт контентом
Сперва мы должны поставить шапку, у меня есть заранее подготовленная шапка
Для этого вставляем курсор в первую ячейку, далее "вставка
" и "изображение
" , выбираем там нашу шапку. И она автоматически вставится в код, ширину я изменяю на 1115px, а высоту оставляю как есть.
Но вот при увеличении масштаба страницы таблица уходит в левую часть и правая остается пустой. Нужно все выровнить по центру. Для этого выделяем всю таблицу (в коде), смотрим вниз и видим там "выровнять
" , выбираем "по центру
", вот и все. Смотрим скрин
Давайте сразу здесь сделаем нашу шапку кликабельной, выделяем текст, идем вниз и там есть строка "ссылка
" , туда пишем index.html
С шапкой закончили, можете что нибудь еще добавить, сфантазируйте
Теперь можно добавлять категории в блок Меню: "вставка " - "гиперссылка " . Изменяя параметры под себя вставляем несколько категорий. Например у меня, Города Италии - city.html , Италия обзор - italiya.html, Итальянская кухня - italyanskaya-picca.html и т.д.
Если нажать на кнопку "свойства страницы " , снизу раздела "дизайн ", можно поменять параметры ссылок (свет, размер, отступы, шрифт и т.д.)
Основная часть: Заходим в дизайн, наводим курсор в блок "основная часть " и вставляем свой текст, код к нему пропишется автоматически. Тут так же, если зайти в "свойства страницы " , можно отредактировать параметры
Теперь давайте создадим наши другие страницы
Заходим в "дизайн
", там в блоке "Основная часть" удаляем все, заполняем другой информацией. Например Города Италии
, пишу сюда все что связано с тематикой Города Италии, и сохраняю страницу как city.html
Италия обзор
, заполняю и сохраняю как italiya.html
В конце вот что у меня получилось
Это естественно не мастеркласс. И для опытных дизайнеров, которых много на этом форуме, мой урок покажется смешным, но для новичка который и понятия не имеет в создании сайта, вполне сойдет.
Надеюсь мой урок послужит новичкам хорошим примером, и направит его делать более серьезные проекты
Если где то допустила ошибку не судите строго
Создание страницы по существующему шаблону
Можно выбрать, предварительно просмотреть и создать новый документ по существующему шаблону. Можно использовать диалоговое окно «Создать документ». чтобы выбрать шаблон из любого сайта, определенного средствами Dreamweaver, или воспользоваться панелью Активы («Ресурсы»). чтобы создать новый документ по существующему шаблону.Страница из шаблона
1. Выберите «Файл» > «Создать».
2. В диалоговом окне «Создать документ» выберите категорию «Страница из шаблона».
3. В столбце «Веб-сайт» выберите сайт Dreamweaver, который содержит необходимый шаблон, а затем выберите шаблон из списка справа.
4. Снимите флажок «Обновлять страницу при изменении шаблона», если не хотите обновлять данную страницу каждый раз, когда вносите изменения в базовый шаблон.
5. Нажмите кнопку «Настройки», чтобы задать установки документа по умолчанию, как, например, тип документа, кодировка и расширение файла.
6. Щелкните «Получить дополнительное содержимое...», чтобы открыть Dreamweaver Exchange, где можно получить больше содержимого для оформления страницы.
7. Нажмите кнопку «Создать» и сохраните документ
(«Файл» > «Сохранить»).
Создание документа по шаблону из панели Активы («Ресурсы»)
1. Откройте панель Активы
(«Ресурсы») (меню
«Окно» >
«Ресурсы»), если она еще не открыта.
2. На панели Активы («Ресурсы») щелкните значок «Шаблоны» слева,
чтобы просмотреть список шаблонов в текущем сайте.
Если шаблон, который надо применить, только что был
создан, может понадобиться нажать кнопку «Обновить», чтобы увидеть его.
3. Щелкните по шаблону, который необходимо применить,
правой кнопкой мыши (Windows) или щелкните по нему при нажатой клавише
«Control» (Macintosh), а затем выберите «Создать из шаблона».
Документ откроется в области «Окно документа».
4. Сохраните документ.
Страница из образца
В состав Dreamweaver включено несколько разработанных профессионалами CSS-файлов и начальных страниц для мобильных приложений. Можно использовать файлы образца в качестве отправной точки для разработки страниц своего сайта. При создании документа на основе файла образца Dreamweaver создает копию файла.
Можно предварительно просмотреть файл образца и прочитать краткое описание элементов оформления страницы в диалоговом окне «Создать документ». При использовании таблиц стилей CSS можно скопировать предварительно разработанную таблицу стилей и применить ее к своим документам.
1. Выберите «Файл» > «Создать».
2. В диалоговом окне «Создать документ» выберите категорию «Страница из образца».
3. В столбце «Образец папки» выберите «Таблица стилей
CSS» или «Начальные страницы Mobile», а затем выберите образец в списке
справа.
4. Нажмите кнопку «Создать».
Новый документ откроется в области «Окно документа» (режимы просмотра «Код» и «Дизайн»). При выборе пункта «Таблица стилей CSS» таблица стилей откроется в представлении «Код».
6. При появлении диалогового окна «Копировать зависимые файлы» задайте параметры и нажмите кнопку «Копировать», чтобы скопировать ресурсы в выбранный каталог.
Можно выбрать собственное местоположение зависимых файлов или использовать местоположение по умолчанию, сгенерированное Dreamweaver (на основе имени источника файла образца).
Сейчас весь сайт состоит только из одной странички – index . Но ведь ваш сайт будет состоять не из одной страницы, правильно? Тогда давайте займемся созданием остальных страниц.
Подразумевается, что у вас в голове уже должен быть образ примерного содержания остальных страниц вашего сайта. Если его у вас еще нет, советую вам этот образ в голове соорудить, так как в дальнейшей работе он очень поможет.
Вообще, у вас же есть названия разделов и подразделов? Логично начать с их создания.
Сначала откройте страницу index в Dreamweaver. Теперь сохраните ее, выполнив команду File (Файл) | Save as (Сохранить как) , но уже под другим именем. Предположим, вторая страница у вас будет называться states (статьи). Вот и сохраните страницу index под именем states.
Теперь у вас есть две идентичные страницы-близнецы, имеющие разные имена. Но зачем вам на сайте две совершенно одинаковые страницы, пусть и под разными именами? Думаю, совершенно ни к чему.
Поэтому, не закрывая Dreamweaver, внесите изменения в вашу новую страницу, которую я по умолчанию буду называть states . Вставьте все картинки, напишите текст… Воплощайте в жизнь свои представления об этой странице. Конечно, сначала там может быть всего пара абзацев, но это же только первый вариант?
Готово? Тогда заходим в Page Properties
. Помните еще, как это делается? Команда меню Modify (Изменить) | Page Properties (Свойства страницы)
или сочетание клавиш
Рядом с надписью Title (Заголовок) пишите заголовок вашей страницы. В данном случае «Статьи». Можно также написать «название вашего сайта > статьи» или наоборот, «статьи > название вашего сайта».
Кстати, а для главной страницы у вас прописан заголовок? Вообще, что такое заголовок? Это то, что отображается в самом верху окна вашего браузера при просмотре страницы.
Вот и все, вторая страница создана. Перед тем, как перейти к созданию всех прочих страниц, я расскажу, как соединить две уже созданные страницы (index и states) гиперссылками.
Являясь пользователем Интернета, вы, безусловно, не раз сталкивались со ссылками. Весь Интернет состоит из них! Сложно представить его существование без ссылок, которые находятся практически на каждой странице.
Вашим посетителям тоже нужно будет как-то перейти из одного раздела в другой. И как это сделаешь без ссылок?
Теперь можно выполнить команду меню Modify (Изменить) | Make Link (Создать ссылку)
(откроется диалоговое окно) или обратиться к нашей любимой панели Properties.
Если вы выбрали второй вариант, то обратите внимание на поле Link (Ссылка)
. Справа находим кнопку с изображение папки Browse for file
и нажимаем на нее.
Откроется диалоговое окно Select File , где нужно выбрать файл, на который будет вести ссылка.
Нажимаем ОК, сохраняем страницу и открываем ее в браузере. Проверяем, как работает ссылка. Если вы все сделали правильно, то после щелчка попадете на нужную страницу. В данном случае с главной страницы на страницу Статьи. Все так? Значит, с задачей вы справились успешно!
Гиперссылки можно создавать и с нуля, не выделяя предварительно слово или словосочетание. Открываем вкладку Common панели инструментов Insert . Первой расположена кнопка Hyperlink (Гиперссылка) .
Щелчок по ней открывает диалоговое окно Hyperlink (Гиперссылка) .
Поле Link (Ссылка) вам уже знакомо, здесь должен быть URL-адрес страницы, на которую делается ссылка. При нажатии на расположенную справа кнопку Browse с изображением папки, откроется окно Select File .
Обратите внимание на поле ввода Title . Сюда можно ввести поясняющий текст, который будет отображаться при наведении курсора на ссылку. Это поле довольно вместительное, есть возможность ввести несколько предложений.
Чтобы изменить адрес созданной ссылки, можно выделить ее и исправить введенное значение в поле Link панели Properties . Или выполнить команду меню Modify (Изменить) | Change Link (Заменить ссылку) , которая открывает окно Select File , в котором нужно выбрать новый файл, содержащий необходимую страницу.
Помимо простых текстовых ссылок, в Dreamweaver также можно создать почтовую ссылку. Почтовая ссылка – это гиперссылка, которая создает переход не на другую страницу или сайт, а на указанный адрес электронной почты. Как правило, такие ссылки используются на сайтах для создания обратной связи с посетителями.
Оба способа приводят к открытию диалогового окна Email Link (Ссылка e-mail).
Нажимаем ОК и смотрим, что получилось.
На странице, в том месте, где стоял текстовой курсор, появится текст, введенный в поле Text. Он будет выглядеть как обычная текстовая ссылка. Откроем страницу в браузере и нажмем на ссылку. Должно открыться стандартное окно программы электронной почты.
