Dreamweaver создание страницы на основе шаблона. Иллюстрированный самоучитель по Adobe Dreamweaver MX. Вставка графического изображения
Продолжаем серию статей, посвященных созданию одностраничника в программе «Dreamweaver» и в этой очередной статье рассмотрим html шаблон на основе одностраничника.
Будем создавать наш html шаблон на основе уже готового образца простейшей «воронки» привлечения потенциальных дистрибьюторов (клиентов) или подписчиков.
В прошлой статье «Как самому сделать свой сайт в программе Dreamweaver» мы немного изучили программу «Dreamweaver» и создали через нее свою первую html страницу.
Если говорить о том, почему я начал эту тему (тему создания одностраничников или как еще говорят, создания воронки привлечения потенциальных клиентов, дистрибьюторов, то…
Дело в том, что я неоднократно сталкиваюсь с тем, как многие люди просто не понимают очевидного. Именно того, что для того, чтобы качественно создавать свои одностраничные сайты и наладить систему привлечения именно этим способом, даже не желательно, а просто необходимо ориентироваться в языках верстки, уметь создавать простейший html шаблон и в случае необходимости, вносить в него дополнительные изменения.
Вам не надо знать все в совершенстве. Надо лишь знать то, что необходимо для решения Ваших задач. И, как Вы поняли, одна из задач - иметь стойкий навык создания одностраничника. Довести этот навык до того, чтобы Вы в любой момент смогли создать нужный Вам html шаблон для любых целей.
Это может быть html шаблон для одностраничника, для выпуска рассылки, для сайта визитки, для продающей страницы, а также html шаблон для различных произвольных вставок на Вашем сайте.
Чтобы там не говорили, а техническая составляющая Вашего сетевого бизнеса или бизнеса, основанного на продаже инфо-продуктов очень важна.
Как я и говорил в прошлой статье, в настоящее время очень много сервисов для создания одностраничных сайтов, на которых предлагаются различные технологии для создания html шаблона.
Однако, во-первых , такие сервисы устаревают и с течением времени уже не отвечают тем требованиям, которые предъявляют современные технологии.
Во-вторых , если Вы слабо или вообще не ориентируетесь в html верстке, то Вам будет очень сложно делать на таких сервисах изменения, нужные именно Вам. Однако, если Вы кровно заинтересованы в том, чтобы Ваша конверсия по привлечению партнеров увеличивалась, Вам просто необходимы навыки создания html шаблона.
В-третьих , - в случае, если Вы лишь поверхностно изучите эту тему, будет страдать Ваша индивидуальность, Ваш стиль и, как следствие - Ваш Бренд .
Вот и получается, что очень многие «ведутся» на разного рода продукты, покупают различные пакеты и сервисы, копируют то, что во многих случаях не работает, а затем удивляются, почему так мало отдачи от их бизнеса.
Проблема еще и в том, что даже купив подобные продукты, люди сталкиваются с различным «подводными камнями», опускают руки и, в итоге «забрасывают» все это, даже не сделав попыток выяснить истинные причины неудач.
Самое интересное, что эти ошибки и неудачи в бОльшей степени связаны именно с технической составляющей html верстки, изучением каскадных таблиц стилей (css), а также понимаем того, а что вообще представляют из себя внутренности созданной html страницы.
Создаем локальный сервер и подготавливаем почву для создания первого html шаблона
Итак, начинаем создавать наш первый html шаблон в программе «Dreamweaver».
В прошлом видео и статье мы познакомились с программой «Dreamweaver», а также научились вставлять на нашем простейшем html шаблоне несколько элементов (или, как еще говорят, - блоков).
Также мы создали специальную папку, где разместили нужные нам файлы для работы.
Сейчас мы с Вами научимся создавать более сложную вещь - локальный сервер. Он нужен для того, чтобы мы без помощи Интернета могли создавать, настраивать и тестировать наши созданные html шаблоны.
Т.е. при создании локального сервера на Вашем жестком диске создается виртуальный раздел (диск), который имитирует Интернет. Соответственно, когда мы установим локальный сервер на Ваш жесткий диск, путь до Вашей html страницы будет выглядеть так, как если бы Вы находились в Интернете.
В качестве локального сервера для создания нашего html шаблона мы будем использовать «Denwer».
Сразу хочу немного остановить Вас. Модификаций «Denwer» много и много к нему есть дополнений. Поэтому, если Вы перейдете на основной сайт для скачивания, то хотя его и будет достаточно для наших задач, однако я рекомендую Вам скачать именно ту версию и сборку, ссылка на которую находиться ниже .
В этой сборке есть очень важный компонент - «Zend Optimizer», который нам потребуется в дальнейшем для настройки очень важного скрипта для повышения конверсии Ваших html-страниц.
Для того, чтобы установить локальный сервер у себя на жестком диске, просто запустите исполняемый файл и следуйте инструкциям, которые появятся у Вас на экране.
Более подробно об установке и настройке локального сервера, я рассказал и показал в специально созданном видеоуроке.
Html шаблон на примере
Html шаблон, который мы будем рассматривать, является простейшим, однако в настоящее время конверсия на такие одностраничники еще достаточно высока. Поэтому Вы смело можете размещать такой вид html шаблона на своих сайтах.
На что следует обратить внимание…
Я постарался сделать урок так, чтобы для Вас это было не трудно, т.к. понимаю, что многие еще не совсем хорошо знают язык html-верстки, а также каскадные таблицы стилей. Поэтому, в уроке подробно объясняется, с помощью каких кнопок можно сделать свой одностраничный сайт без этих знаний и умений.
Вообщем, смотрите урок, все необходимые файлы (если еще не скачали) и создавайте свой одностраничник в визуальном редакторе html «Dreamweaver».
P.S. В уроке небольшая ошибка, которую я заметил уже после создания видео. Пояснения смотрите в самом видео.
P.S. В следующей статье я подготовлю видео, в котором покажу «продвинутый» способ создания одностраничного сайта на основе самых популярных html шаблонов Рунета.
С уважением, Андрей Аверьков
#averkovteam #млм #сетевоймаркетинг #работадома #рекрутинг #млмбизнес #социальныесети
Шаблоны 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 спросит не хотите ли вы обновить страницы, созданные на основе шаблона. Он также укажет, какие это файлы.
Как только вы кликните «Обновить», все файлы, созданные на основе этого шаблона, будут обновлены. Вам только остается сохранить их и загрузить на веб-сервер.
Создание страницы по существующему шаблону
Можно выбрать, предварительно просмотреть и создать новый документ по существующему шаблону. Можно использовать диалоговое окно «Создать документ». чтобы выбрать шаблон из любого сайта, определенного средствами 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. Он будет выглядеть как обычная текстовая ссылка. Откроем страницу в браузере и нажмем на ссылку. Должно открыться стандартное окно программы электронной почты.
Вот мы и закончили наш третий Web-сайт. Все работает, все страницы нормально загружаются и отображаются в Web-обозревателе. Казалось бы, нет поводов для беспокойства.
Нет, но только до поры до времени.
Представим себе такую ситуацию. Мы вдруг решили добавить в наш сайт новую страницу. Чтобы это сделать, нам нужно изменить полосу навигации во всех страницах, а для этого придется открыть каждую из них в окне документа, добавить ссылку и сохранить страницу. Наш сайт невелик по размеру, и мы выполним эту работу довольно быстро. А если бы он был велик?
Конечно, мы можем воспользоваться встроенными средствами Dreamweaver. Например, вызвать диалоговое окно Find and Replace - средство исключительно мощное. (О возможностях по поиску и замене подстрок см. в главе 2.) Или запустить замену гиперссылок, вызвав пункт Change Link Sitewide меню Site панели Site (см. главу 6). Во многих случаях это поможет нам быстро заменить целые фрагменты содержимого страницы или ее HTML-кода. Большую помощь нам могут дать активы и библиотека элементов, также описанные в главе 6.
Но что делать, если мы хотим произвести какие-нибудь значительные изменения, например, радикально поменять структуру таблицы разметки? Поиск и замена нам вряд ли помогут, а уж автоматическая замена гиперссылок - тем более. Даже активы с библиотекой нам в этом случае не помогут. Неужели придется переделывать заново все страницы?!
Если бы вы работали не в среде Dreamweaver, вероятно, так бы и пришлось делать. Но нам повезло. Dreamweaver поддерживает такое мощное средство, как шаблоны. Они уже упоминались в главе 3. Сейчас мы их рассмотрим подробнее.
Шаблон - это своеобразный образец, "скелет" Web-страницы, содержащий общие для всех страниц элементы. Когда вы создаете новую страницу на основе шаблона, вам остается только вписать в нужные места уникальное содержимое этой самой страницы и сохранить ее. Впоследствии вы можете изменить шаблон - и Dreamweaver сам обновит все созданные на его основе страницы.
В этом смысле шаблоны схожи с элементами библиотеки (см. главу 6). Отличие в том, что шаблон - это заготовка для целой страницы, а библиотека хранит только ее отдельные элементы. Однако разработчики Dreamweaver считают, что шаблоны ближе всего по "родству" активам (см. главу 6), и поместили список шаблонов в панели Assets .
Изначально шаблон изменить нельзя, т. е. когда вы создаете на его основе страницу, вы можете помещать содержимое только в специально отведенных для этого местах - изменяемых областях. Элементы самого шаблона вы редактировать не можете, т. к. они являются неизменяемыми областями. Если же вы хотите что-то исправить, то вам придется открыть в окне документа сам шаблон. Таким образом, Dreamweaver спасает вас от ошибочного изменения шаблона и, соответственно, от искажения созданных на его основе Web-страниц.
Можно сказать, что шаблоны - это обычные Web-страницы. При редактировании вы можете обращаться с шаблонами, как с обычными Web-страницами, и использовать те же инструменты. Также вы можете задавать параметры страницы, которая будет создана на основе этого шаблона (название, цвет фона, текста и гиперссылок). Однако при создании HTML-кода шаблонов Dreamweaver использует множество собственных тегов и атрибутов, поэтому говорить о том, что шаблон - обычная Web-страница, не совсем корректно.
Шаблоны сохраняются в файлах с расширением.dwt в папке Templates, находящейся в корневой папке локальной копии сайта. Из этого следует, что шаблоны - неотъемлемая часть вашего сайта, как и библиотека. Чтобы использовать какой-либо шаблон в другом сайте, вы будете должны скопировать его в тот сайт, использовав стандартные средства Dreamweaver (см. главу 6). В одном сайте могут применяться несколько шаблонов.
Шаблоны более всего пригодятся вам, если вы создаете страницы на основе табличного дизайна. Такие страницы практически всегда содержат множество повторяющихся элементов, обновлять которые вручную крайне трудоемко. Но вы можете заготовить шаблоны и для "обычных" страниц. Это может понадобиться, например, если вы создаете страницы с одинаковым оформлением для какого-то большого фирменного сайта.
Вместе с Dreamweaver поставляется довольно много шаблонов, созданных профессиональными Web-дизайнерами. Вы можете использовать эти шаблоны для создания своих страниц; как это делается, было рассмотрено в главе 3. Попробуйте - возможно, вы найдете что-нибудь, для вас подходящее.