Как сделать шапку сайта dreamweaver
Первое, в чем мы должны разобраться - это в терминологии!
Когда вы говорите "шаблон в Dreamweaver" - что конкретно вы имеете ввиду! Потому, что говоря "шаблон в Dreamweaver" можно подразумевать разное!Всего понятий шаблонов связанных с Dreamweaver несколько!
Начнем со встроенных шаблонов в Dreamweaver. В программе зашито несколько вариантов простых шаблонов для новичков, чтобы можно было поиграться. Я начинал именно с них! Как бы странно это не звучало!
Далее. говоря "шаблон в Dreamweaver" - можно подразумевать технологию, которую внедрил Dreamweaver первым. Не знаю есть ли такие технологии у других программ - и да! Я тоже этим пользовался!
Встроенные шаблоны в Dreamweaver.
Один из видов шаблонов в Dreamweaver - это :встроенные шаблоны в Dreamweaver
Они уже существуют в программе - их просто нужно открыть!
В зависимости от версии Dreamweaver - шаблоны, их расположение, количество может отличаться.
Нажимаем ctrl + N, либо заходим в файл
Перейдем ко второму пункту - "Шаблоны bootstrap" - не буду перечислять все виды шаблонов. которые вшиты в программу Dreamweaver - вы сможете посмотреть их все на нижнем скрине:
Кроме шаблонов сайтов в программе Dreamweaver дополнительно есть несколько шаблонов писем:
И последним пунктом в шаблонах dreamweaver идут : "адаптивные наборы для начинающих"!
Шаблонирование страниц в Dreamweaver.
Что же за такой зверь - "Шаблонирование страниц в Dreamweaver" - если очень приблизительно, то чем-то похоже на include в php - конечно же. с огромной натяжкой!Давайте, чтобы вы смогли понять о чем будет идти речь в нескольких коротких строках, что такое "Шаблонирование страниц в Dreamweaver"!?
Создается шаблон с разрешением ".dwt".
В котором создаются редактируемые и нередактируемые области.
Создаем страницу, страницы, много страниц - присоединяем их к нашему шаблону.
В редактируемой области шаблона - изменяем какие-то данные. например меню, футер и .тд.
Все страницы, которые были прикреплены к данному шаблону будут обновлены.
Зачем нужно такое шаблонирование!?
Сейчас, мне, конечно же не нужно. но когда-то лет 15 назад - это мне казалось Олимпом технологий сайтостроения.
Зачем это нужно сейчас!?
Друзья! Рекомендую не заниматься этой шнягой, а сразу перейти на изучение php - это настолько детская вещь, что в большом "вебе" - нигде не используется! Вы просто потеряете время!Как расшифровывается dwt :
Сделаем файл шаблона в Dreamweaver
Первым шагом - нам нужно создать физический файл шаблона в Dreamweaver.Продолжаем про шаблонирование в Dreamweaver!
Если вы все еще здесь и решили все-таки изучить, как делается шаблонирование, то я вас научу!
Идем в меню - сохранить как шаблон :
Продолжаем про шаблонирование в Dreamweaver!
Далее открывается новое окно, где мы можем лицезреть несколько полей.
1). в первой строке, выпадающего меню, я ничего не выбирал, потому. что мы ранее уже создали место для сайта, поэтому там высвечивается название той папки!
2). Мы еще не создали ни одного шаблона в Dreamweaver, поэтому в области написано, - "что нет шаблонов"!
3). Описание -можете, что-нибудь написать.
4). Название шаблона - назовите как-нибудь. пусть это будет "это_первый_шаблон".
Продолжаем про шаблонирование в Dreamweaver!
После этого всплывает малозначащее окно - обновить ссылки нажимаем "ок"!
Произошли какие-то изменения в нашем шаблоне! У нас появилась область "TemplateBeginEditable" - как вы наверное догадались - это области, которые рекомендуют делать уникальными - это заголовок, и еще парочка. И справа в сайдбаре смотрим, что появилась папка(Templates) и новый файл(это_первый_шаблон.dwt):
Как сделать редактируемую область в файле шаблона?
Далее - как я люблю все по пунктам.
Далее. вы должны назвать редактируемую область - либо оставить название по умолчанию - нажимаем "ок" :
Как сделать редактируемую область в файле шаблона?
Вот. у нас появилась первая редактируемая область два тега "TemplateBeginEditable" и "TemplateEndEditable" - эта часть будет редактироваться только в файле!
Прикрепляем шаблон к странице в dreamweaver!
Далее нам нужно прикрепить страницу к шаблону dreamweaver:
Открываем html страницу, которую хотим прикрепить к шаблону, который был сделан ранее! Меню → инструменты → применить шаблон к странице:
В новом окне выбираем тот шаблон, к которому хотим прикрепить нашу страницу! У нас только оди шаблон. кликаем его и доступной становится кнопка "выбрать" :
Прикрепляем шаблон к странице в dreamweaver!
В новом окне. если вдруг такое появляется - кликаем по строке - "не разрешен". Активируется кнопка ниже. из вариантов выбираем ту часть, которую ранее мы сделали - "xone_1" :
Прикрепляем шаблон к странице в dreamweaver!
Мы подошли к конечной точке прикрепления страницы к шаблону в dreamweaver! Здесь мы видим, что есть некоторые области, которые явно выделяются на фоне других - это те области, которые будут уникальными для данной страницы. как например вот этот текст, который вы в данный момент читаете!
Как открепить шаблон от страницы в dreamweaver!
Если вам вдруг потребуется открепить страницу от шаблона. то возьмем выше приведенный скрин, на котором мы видим, что требуемая кнопка - открепить от шаблона находится на второй позиции:
Как работает обновление шаблона в программе в dreamweaver!
Теперь. мы наконец-то дошли до пункта, а как же это "шаблонирование в dreamweaver" работает?
Открываем шаблон, который мы делали ранее с разрешением ".dwt". Все те места, в которых идет речь об уникальном контенте - это все те области доступны для редактирования на каждой странице. Т.е. шаблон, на эти участки повлиять никак не может!
Создаем какую-то область - за пределами тех областей, о которых сказано одним предложением выше. Пусть это будет "futer" с каким-то контентом внутри.
<futer>Здесь будет futer и он будет находиться в шаблоне.</futer>Нажимаем сохранить - "ctrl + S".
И видим, что всплывает окно, которое нас спрашивает - обновить ли те страницы, которые вы ранее прикрепили к данном шаблону!?
Неи обязательно обновлять все страницы после каждого редактирования шаблона - обновите, когда, например закончите работать с каким-то куском кода, или просто вечером перед закрытием компьютера!
Никаким образом "ПРОСТО ШАБЛОНЫ" и "ШАБЛОНЫ ДЛЯ DREAMWEAVER" не отличаются! Какие там должны быть различия!?Если же речь идет о шаблонировании в Dreamweaver, то вообще любой шаблон можно привести к шаблону в Dreamweaver!
Шаблоны для Dreamweaver на русском.
Это что за хрень!?
Шаблоны для Dreamweaver на русском.
Основная часть шаблона, любого шаблона, будет иметь разметку html. Эту часть никак невозможно перевести.
Вторая часть шаблона - это видимая часть, которая была заполнена для визуализации! Эта видимая часть предназначена под замену вашим контентом! будет ли это текст, который вы сейчас читаете или меню, которое нужно в любом случае менять под ваши "хотелки".
У заголовка страницы есть только одно свойство: собственно заголовок. Заголовок отображается на панели заголовка окна «Документ» в Dreamweaver, а также на панели заголовка браузера при просмотре страницы в большинстве браузеров. Кроме того, заголовок отображается на панели инструментов в окне «Документ».
Настройка заголовка в окне «Документ»
❖ Введите заголовок в текстовом поле «Заголовок» на панели инструментов окна «Документ».
Указание заголовка в содержимом заголовка
1 В меню «Просмотр» выберите пункт «Содержимое заголовка».
2 Выберите маркер «Заголовок», отображающийся в верхней части окна «Документ».
3 Укажите заголовок страницы в инспекторе свойств.
Указание ключевых слов для страницы
Многие поисковые механизмы (программы, которые автоматически просматривают Интернет и собирают информацию, которая впоследствии индексируется), считывают содержимое тега meta «Ключевые слова» и используют эти данные для индексирования страниц в своих базах данных. Некоторые поисковые механизмы ограничивают число индексируемых ключевых слов или символов, либо пропускают все ключевые слова в случае превышения установленного лимита, поэтому имеет смысл использовать несколько хорошо
подобранных ключевых слов.
Добавление тега meta «Ключевые слова»
1 Выберите меню «Вставка» > «HTML» > «Теги заголовка» > «Ключевые слова».
2 Укажите ключевые слова, разделенные запятыми, в отобразившемся диалоговом окне.
Изменение тега meta «Ключевые слова»
1 В меню «Просмотр» выберите пункт «Содержимое заголовка».
2 Выберите маркер «Ключевые слова», отображающийся в верхней части окна «Документ».
3 В инспекторе свойств просмотрите, измените или удалите ключевые слова. Можно также добавить ключевые слова, разделенные запятыми.
Настройка описаний для страницы
Многие поисковые механизмы (программы, которые автоматически просматривают Интернет и собирают информацию, которая впоследствии индексируются), считывают содержимое тега meta «Описание».
Некоторые из них использую эту информацию для индексирования страниц в своих базах данных, а некоторые отображают эти данные на странице результатов поиска (вместо первых строк найденного документа). Некоторые поисковые механизмы ограничивают число индексируемых символов, поэтому имеет смысл ограничивать описания несколькими словами (к примеру, Pork barbecue catering in Albany, Georgia или web design at reasonable rates for clients worldwide).
Добавление тега meta «Описание»
1 Выберите меню «Вставка» > «HTML» > «Теги заголовка» > «Описание».
2 Введите текст описания в отобразившемся диалоговом окне.
Изменение тега meta «Описание»
1 В меню «Просмотр» выберите пункт «Содержимое заголовка».
2 Выберите маркер «Описание», отображающийся в верхней части окна «Документ».
3 В инспекторе свойств просмотрите, измените или удалите текст описания.
Просмотр и редактирование содержимого на веб-странице Dreamweaver, настройка свойств meta и заголовка страницы, указание ключевых слов и описаний для страницы, а также многое другое.
Элементы в разделе head документа можно просматривать в представлении кода или в окне инспектора кода.
Вставка элемента в раздел заголовка документа
Выберите тег head в меню «Вставка» > «HTML».
Откроется диалоговое окно, в котором нужно выбрать параметры для выделенного элемента (их также можно выбрать в окне инспектора свойств).Изменение элемента в разделе заголовка документа
Элементы Head можно редактировать путем непосредственного ввода изменений в коде в представлении кода или в окне инспектора свойств.
Для редактирования элементов в разделе head с помощью инспектора свойств выполните следующие действия.
Выберите элемент head на панели DOM («Окно» > «Панель DOM»).
В инспекторе свойств отобразятся свойства выбранного элемента.
Задайте или измените свойства этого элемента в окне инспектора свойств.Тег meta — это элемент head , куда записываются такие сведения о текущей странице, как кодировка символов, автор, авторские права или ключевые слова. Кроме того, с помощью этих тегов можно передавать на сервер такие данные, как дата истечения срока, интервал обновления и рейтинг POWDER для страницы. (Технология POWDER, Protocol for Web Description Resources, позволяет назначать веб-страницам рейтинги, подобные рейтингам кинофильмов.)
Добавление тега meta
Выберите пункт меню «Вставка» > «HTML» > «Метаданные».
Изменение существующего тега meta
Элементы meta можно редактировать путем непосредственного ввода изменений в коде в представлении кода или в окне инспектора свойств.
Для редактирования элементов в разделе meta с помощью инспектора свойств выполните следующие действия.
Выберите элемент head на панели DOM («Окно» > «Панель DOM»).
В инспекторе свойств отобразятся свойства выбранного элемента.
На панели DOM выберите тег meta.
Определяет тип сведений, предоставляемых в этом теге. Некоторые значения, например, description , keywords и refresh , уже полностью определены (и для них в Dreamweaver имеются отдельные инспектора свойств), однако можно задать практически любое значение (например, creationdate , documentID или level ).
Содержит фактические сведения. Например, если в качестве значения был задан level , можно указать для содержимого варианты beginner , intermediate или advanced .
У заголовка страницы есть только одно свойство: собственно заголовок. Отредактировать заголовок страницы можно одним из следующих способов.
- Непосредственное редактирование заголовка в коде (в представлении кода)
- Выбор тега title на панели DOM и редактирование заголовка в инспекторе свойств
Многие поисковые механизмы (программы, которые автоматически просматривают Интернет и собирают информацию, которая впоследствии индексируется), считывают содержимое тега meta «Ключевые слова» и используют эти данные для индексирования страниц в своих базах данных. Некоторые поисковые механизмы ограничивают число индексируемых ключевых слов или символов, либо пропускают все ключевые слова в случае превышения установленного лимита, поэтому имеет смысл использовать несколько хорошо подобранных ключевых слов.
Добавление тега meta «Ключевые слова»
Выберите меню «Вставка» > «HTML» > «Ключевые слова».
Укажите ключевые слова, разделенные запятыми, в отобразившемся диалоговом окне.Изменение тега meta «Ключевые слова»
Отредактировать описания meta для ключевых слов можно одним из следующих способов.
- Непосредственное редактирование ключевого слова в коде (в представлении кода)
- Выбор тега meta для ключевого слова на панели DOM и просмотр, изменение или удаление ключевых слов в инспекторе свойств
Ключевые слова должны быть разделены запятыми.
Многие поисковые механизмы (программы, которые автоматически просматривают Интернет и собирают информацию, которая впоследствии индексируются), считывают содержимое тега meta «Описание». Некоторые из них использую эту информацию для индексирования страниц в своих базах данных, а некоторые отображают эти данные на странице результатов поиска (вместо первых строк найденного документа). Некоторые поисковые механизмы ограничивают число индексируемых символов, поэтому имеет смысл ограничивать описания несколькими словами (к примеру, Pork barbecue catering in Albany, Georgia или web design at reasonable rates for clients worldwide ).
Добавление тега meta «Описание»
Выберите меню «Вставка» > «HTML» > «Описание».
Введите текст описания в отобразившемся диалоговом окне.Изменение тега meta «Описание»
Отредактировать описания meta можно одним из следующих способов.
- Непосредственное редактирование описания в коде (в представлении кода)
- Выбор тега meta для описания на панели DOM и изменение описания в инспекторе свойств
Добавление тега meta «Обновить»
Выберите пункт меню «Вставка» > «HTML» > «Метаданные».
В появившемся диалоговом окне укажите свойства следующим образом.
определяет, что типом сведений, предоставляемых в этом теге, является refresh.
определяет время в секундах для ожидания перед обновлением страницы в браузере. Чтобы задать обновление страницы в браузере немедленно по завершении загрузки, введите в этом поле значение 0.
Изменение тега meta «Обновить»
Отредактировать тег meta «Обновить» можно одним из следующих способов.
- Непосредственное редактирование свойств в коде (в представлении кода)
- Выбор тега meta для обновления на панели DOM или в коде и изменение свойств в инспекторе свойств
Можно отредактировать элемент «Базовый адрес», используемый для настройки базового URL-адреса, относительно которого на странице будут указываться все пути к документам.
Выберите элемент «Базовый адрес» на панели DOM.
В инспекторе свойств укажите свойства тега meta «Базовый адрес».Указывает фрейм или окно, в котором должны быть открыты все связанные документы. Выберите один из фреймов в текущем наборе фреймов либо одно из следующих зарезервированных имен.
_blank означает загрузку связанного документа в новом окне браузера без имени.
_parent — загрузка связанного документа в родительском наборе фреймов или окне фрейма, содержащего ссылку. Если содержащий ссылку фрейм не является вложенным, загрузка выполняется так же, как и при использовании имени _top — связанный документ загружается в полном окне браузера.
_self загружает связанный документ в тот же фрейм или то же окно, в котором находится ссылка. Это назначение установлено по умолчанию, поэтому обычно его можно не определять.
_top загружает связанный документ в полное окно браузера, тем самым удаляя все фреймы.
1. Курсор мышки переводим в третью ячейку и выбираем в настройках стилей поле Vert стиль Тор. Другими словами, все содержимое этой ячейки будет расположено сверху от границ. Для четвертой ячейки делаем тоже самое.
2. После этого выбираем "Файл" – "Сохранить как…". Сохранять нужно под названием article.html. Это копия главной страницы с другим именем. Далее ее нужно отредактировать.
3. Далее нужно страничку article.html наполнить. Наводим курсор на четвертую ячейку и заменим заголовок и текст (просто выделив мышкой ставим новый).
4. Когда страница и статья отредактирована, сохраняем документ Ctrl-S. А после этого сохраняем файл, как about,html.
5. Заголовок "Обо мне" заменяем, текст тоже ставим заранее приготовленный.
6. Теперь создадим список. Выделяем нужный текст, во вкладке Text (панель инструментов) выбираем li. Все остальные компоненты списка обрабатываются так же.
7. Далее выбираете Split. В исходном коде находим список, выделяем и выбираем на панели Text "ul".
8. Курсор останавливаем на теге ul, делаем пробел. Программа выдаст подсказку – покажет все возможные теги. Нам нужен class, а далее, в следующем выпавшем списке – style3.
9. Смотрим, что вышло (и не забудьте сохранить документ)! Вы не представляете, как часто, в рабочем запале забывают про это простое действие и сколько работы пропадало из-за этой, казалось бы, мелкой небрежности. Цените свое время!
10. Следующий шаг: ставим портрет. Для этого во вкладке Common на рабочей панели находим Image: Image (так же, как когда мы делали логотип).
11. Далее в поле для альтернативного текста (alternative text) вписываем, к примеру, "Мой портрет".
Смотрим, что вышло:
12. И снова: не забываем сохранить!
В конце этого занятия вы научились создавать на сайте дополнительные страницы, изменять внутри ячейки расположение текста, вставлять изображение и маркировать списки. Следующая часть будет посвящена публикации сайта в интернете.
Читайте также: