Вредоносное ПО (malware) - это назойливые или опасные программы,...
Мы подготовили страницу к тому, чтобы сделать из неё шаблон в программе к Dreamweaver.
Немного вспомним, что я уже писал про шаблон в Dreamweaver. Когда вы , н-ое количество страниц, к созданному шаблону, и потом измените его, то все страницы изменяться вслед за шаблоном!
Единственное место, которое не изменится – это редактируемая область! Там может находится оригинальный текст, либо любая другая уникальная информация.
Как сделать редактируемую область в Dreamweaver.
Количество редактируемых областей неограниченное и вы можете установить такие области где угодно.
Мы же будем создавать редактируемую область в районе, где у нас будет основной текст!
Открываем подготовленную в программе Dreamweaver.
Если у вас нет текста, то вы просто наведите мышку туда, где у вас будет редактируемая область. У меня есть текст, я его выделяю. Нажимаем , - далее – шаблоны – новая редактируемая область.
В новом окне назовите вашу редактируемую область. Я не применяю для этого текст, а просто ставлю цифру. Для текста на всех сайтах цифра 2. А для заголовка делаю отдельную редактируемую область №1 – почему так? Не знаю, просто изначально так повелось.
В принципе и заголовок и текст можно сделать в одной редактируемой области!
Смотрим, что у нас получилось.
Здесь мы видим, что в созданной нами редактируемой области №2 есть текст.Эту редактируемую область можно увидеть только в программе, в браузере её не видно!
Когда вы сохраняете первый шаблон, то автоматически создается папка для хранения шаблонов, которая будет называться - Templates.
Открывается новое окно, где:
Сайт – сайт
Существующие шаблоны – у меня уже есть шаблоны, а у вас, если это первый шаблон, то окно будет пустое.
Описание - всегда оставлял его пустым.
Как назвать шаблон в Dreamweaver?
Почему возник такой вопрос? Если вы собираетесь делать сайт на различные темы, либо у вас будут различные под рубрики, то и шаблоны, наверное, будут отличаться. У меня много тем – поэтому много шаблонов. Каждый шаблон отличается от своего собрата верхней строкой, первая строчка на странице указывающая, где вы находитесь.
Каждый из шаблонов должен как-то называться. Название шаблона будет отображаться в коде. Как это название будет отражаться на оптимизации вашей страницы – сложно сказать, но мне кажется, что если будем называть шаблон в соответствии с темой, которую вы собираетесь разрабатывать, то это будет лучше, чем назвать шаблон номером или безликим словом.
Рассмотрим пример, если вы сейчас нажмете сочетание клавиш ctrl + U, то увидите код.
Это вторая строчка, и мы видим, что наш шаблон называется –« Всё о программе Dreamweaver.dwt»
Добрый день
Все мы знаем, что уникальный шаблон хорошо воспринимается поисковиками.
Так вот, сегодня я хочу поговорить о том, как написать свой собственный шаблон с помощью программы 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 (на основе имени источника файла образца).
Шаблоны 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 спросит не хотите ли вы обновить страницы, созданные на основе шаблона. Он также укажет, какие это файлы.
Как только вы кликните «Обновить», все файлы, созданные на основе этого шаблона, будут обновлены. Вам только остается сохранить их и загрузить на веб-сервер.
