Иллюстрированный самоучитель по Adobe Dreamweaver MX. Установка шаблона в Dreamweaver Создание страницы по существующему шаблону

Раскрывающийся список папок и список файлов позволят нам выбрать нужную папку и файл.
В поле ввода Имя файла появится имя выбранного файла (или мы можем сами ввести его туда). А раскрывающийся список Тип файлов позволит нам выбрать, какой тип файлов нам нужно найти. Все это знакомо нам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие - справа находится панель предваритель ного просмотра. А если мы желаем ее убрать отключим флажок Preview images. Итак, мы выбрали файл. Осталось нажать кнопку ОК. Но Dreamweaver потребует от нас еще кое-какую информацию, выведя диалоговое окно “Image Tag Accessibility Attributes (Атрибуты доступности тега изображения)”.

Комбинированный список “Alternate text (Альтернативный текст)” этого окна служит для задания, так называемого текста замены. Это придумано для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображения, помещенного на ней, отобразит пустую рамку соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель выведет небольшую подсказку, содержащую этот самый текст замены. Поэтому рекомендуется всегда пользоваться этой возможностью.

Собственно в список Alternate text вводится краткий текст замены. Его ограничение - не более 50 символов. Если нам нужно выводить на экран более подробный текст замены, его можно сохранить в отдельный файл Web-страницы, а потом ввести его интернет-адрес в поле ввода Long description. Также можно щелкнуть кнопку в виде папки, расположенную правее этого поля, и выбрать нужный файл в диалоговом окне Select File. Закончив ввод данных, нажмем кнопку ОК. Dreamweaver поместит графическое изображение в то место, где на данный момент находится текстовый курсор.

Параметры графического изображения

Теперь сохраним получившуюся страницу, выделим изображение, если оно не выделено, и посмотрим на редактор свойств. То, что мы там увидим Поля ввода W и Н позволяют нам задать размеры изображения, введя его, соответственно, ширину и высоту вручную. Это может быть полезно, если выделенное изображение - часть оформления сайта; в остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры изменения размера.

Вообще-то, Dreamweaver при помещении на Web-страницу графического изображения сам помещает в эти поля ввода его изначальные ширину и высоту. Как мы уже знаем, Web-обозреватель сразу после загрузки страницы
отображает еще не загруженные изображения в виде пустых рамок. Если размеры изображений были явно заданы, они будут сразу же применены к рамкам, и оформление страницы не нарушится. В противном случае Web-обозреватель отобразит рамки некоего размера по умолчанию, и при последующей загрузке изображений их размеры будут меняться, что вызовет перерисовку самой страницы. А это очень неприятно.

Поля ввода V Space и Н Space задают, соответственно, вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

Поле ввода Src задает интернет-адрес файла, где хранится графическое изображение. Справа от него видны две кнопки. Нажав на правую из них (с изображением папки), мы откроем диалоговое окно Select Image Source .

Мы также можем изменить имя файла изображения, щелкнув по изображению правой кнопкой мыши и выбрав пункт Source File в контекстном меню, или просто дважды щелкнув мышью по изображению. После этого на экране появится диалоговое окно Select Image Source.

Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое "черновое" изображение. "Черновое" изображение имеет меньший размер, как правило, за счет более низкого качества, и придумано, опять же, для владельцев низкоскоростных каналов связи. Web-обозреватель первым делом загрузит "черновик", т. к. он имеет значительно меньший размер, и выведет его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается основное изображение и подменяет собой "черновик".

Рекомендуется изготавливать "черновик" только тогда, когда оригинальное изображение слишком велико, чтобы быстро загрузиться. В частности, это подойдет, если мы соберемся делать сайт с художественной графикой.

Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения, в пикселах. По умолчанию она равна нулю, т. е. рамки нет.

Комбинированный список Alt задает уже знакомый нам краткий текст замены.

А теперь обратимся к раскрывающемуся списку Align. Он позволяет нам задать выравнивание изображения, фактически - относительное местоположение его и текста, в котором оно находится.
Список Align содержит следующие пункты:

• Default - расположение по умолчанию, обычно аналогично пункту Baseline;
• Baseline - низ изображения совпадает с базовой линией текста (воображаемой линией, на которой находится строка текста) строки, в которой оно находится;
• Тор - верх изображения совпадает с верхом текста строки, в которой оно находится;
• Middle - середина изображения совпадает с базовой линией текста;
• Bottom - низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);
• TextTop - верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);
• Absolute Middle - середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);
• Absolute Bottom - низ изображения совпадает с низом самого нижнего символа текста;
• Left - изображение "прижимается" к левому краю страницы, а текст "обтекает" его справа;
• Right - изображение "прижимается" к правому краю страницы, а текст "обтекает" его слева.

В последних двух случаях изображение становится плавающим. Web-обозревателем влево или вправо, при этом текст, в который оно было вставлено, будет обтекать его. А в точке, где было вставлено плавающее изображение, Dreamweaver отображает специальный маркер плавающего изображения . Этот маркер выводится только для удобства Web-дизайнера и только в Dreamweaver; Web-обозреватель его никак не отображает.

Итак, с редактором свойств мы разобрались. Теперь давайте зададим свойства нашего изображения. Расстояние от текста сделаем по 5 пикселов по горизонтали и вертикали, выравнивание - по левому краю, "альтернативный" текст - "всплывающая надпись". И сохраним страницу.

Чтобы вернуть изначальные размеры изображения, мы можем воспользоваться кнопкой отмены), расположенной между полями ввода W и Н редактора свойств и правее их, а также пунктом контекстного меню Reset Size. Это полезно, если мы сильно их исказили и хотим начать все сначала.

Специальные изображения

Язык HTML и Dreamweaver позволяют создавать не только обычные изображения, но и имеющие особые свойства. Это изображения-гиперссылки , активные изображения и карты-изображения . Они часто используются на Web-страницах, поэтому нам нужно будет их рассмотреть.

Любое изображение может использоваться в качестве гиперссылки, для этого лишь достаточно ввести интернет адрес в поле "Link " панели "Properties ".
Причем ссылку вы можете дать как на адрес электронной почты, так и на другую веб страницу. Во втором случае у вас станет доступным список "Target "

Изображение можно сделать активным, реагирующим на наведение на него курсором мышки - Rollover . Для этого вам нужно будет запастись двумя изображениями, которые будут сменять друг друга, и на вкладке "Common " нажмите соответствующую кнопку.
В открывшемся окне вам нужно будет заполнить требуемые поля

В поле Image Name - укажите оригинальное имя активного изображения, причем в имени могут быть только латинские буквы (с буквы должно начинаться любое активное изображение) и цифры (пренепременно арабские!-:)
В поле Original Image - введите путь до основного изображения, того, которое будет первым загружаться на странице.

В поле Rollover Image - введите путь до "изображения - эффекта", - это изображение будет появляться только при наводе курсора мыши на ваше активное изображение.
Поставьте флажок в поле Preload Rollover - в этом случае оба рисунка сразу будут загружены броузером и выполнение эффекта начнется сразу же при наведении мышки. В противном случае (при отключенной галочке), при наведении на такое изображение мышки - браузер начнет загрузку второго изображения... и медленный какой-то эффект получится.
В поле Altemate Text - введите текстовый комментарий, всплывающий при наведении курсором мышки на изображение.
Ну а в поле Go To URL - интернет адрес.

Изображения-карты

Карта - это цельное изображение с размеченными "горячими областями", причем каждая такая область является гиперссылкой и ее соответствует свой интернет адрес.

Для начала разместите рисунок на странице, выделите его, кликнув по нему левой кнопкой мышки и на вкладке "Properties " при помощи бирюзовых фигур (в левом нижнем углу - группа элементов Map) выберите один из методов выделения "горячей области". Так как для примера я хочу сделать "горячей областью" синие пиктограммы, то ближе всего к этому фигура прямоугольник. Но вы можете выбрать как круг, так и фигуру неправильной формы. Нажмите на четырехугольник и выделите интересующую вас область.

Выделенная вами фигура примет вид:

вам осталось только ввести интернет адрес в поле “Link ” (ссылки могут быть на другие страницы вашего сайта или на другие сайты, либо на почтовые адреса), выбрать один из пунктов поля Target и ввести альтернативный текст в поле Alt.

После выделения вы можете перемещать выделенную область, нажав для этого кнопку со стрелочкой - в левом нижнем углу.
А для выделения фигур неправильных форм достаточно кликать левой кнопкой мышки по периметру области для выделения. Напоследок дайте оригинальное имя вашей карте в поле ввода Map и все.

Таблицы

Для того чтобы создать новую таблицу, перейдите на вкладку "Commons " панели "Insert " и нажмите кнопку .

В появившемся диалоге заполните необходимые поля.
Rows - количество строк в таблице
Columns - количество столбцов в таблице
Table width - ширина таблицы, причем в выпадающем меню вам нужно указать единицы измерения - проценты или пиксели.
Border thickness - толщина рамки таблицы в пикселях, причем если вы поставите значение равным нулю, то сама таблица будет не видна на странице.
Cell Padding - расстояние отступа внутри ячеек таблицы
Cell Spacing - расстояние между границами ячеек таблицы
Набор переключателей Header (Верхний колонтитул) позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключатели None (нет ни "шапки", ни выделенного первого столбца), Left (выделенный первый столбец), Тор ("шапка") и Both (и "шапка", и выделенный первый столбец).
Ячейки, составляющие "шапку" и выделенный столбец, будут оформлены как ячейки заголовка, а текст, который мы введем в них, будет автоматически выровнен по центру и выделен полужирным шрифтом.
В поле ввода Caption (Заголовок) вводится название таблицы. Это название будет находиться над создаваемой таблицей.
Раскрывающийся список Align caption (Выравнивание) позволит нам задать местоположение и выравнивание названия (если, конечно, мы его ввели). Здесь доступны следующие пункты:
default (по умолчанию)- выравнивание выполняет сам Web-обозреватель, обычно в этом случае название находится над таблицей и выравнивается по центру;
top - название находится над таблицей и выравнивается по центру;
bottom - название находится под таблицей и выравнивается по центру;
left - название находится над таблицей и выравнивается по левому краю;
right- название находится над таблицей и выравнивается по правому краю.

В области редактирования Summary (Итого) вводится примечание таблицы. Это примечание не выводится Web-обозревателями на экран, но может быть использовано для каких-то других целей (например, его могут обрабатывать программы, читающие экранный текст). Задавать его не обязательно.

После того как таблица создана, вы можете изменять ее размеры перетаскиванием границ при помощи мышки. Наведите курсор на один из трех квадратиков в выделении таблицы.
Теперь поставим текстовый курсор в любую ячейку таблицы и наберем какой-нибудь текст. Повторим то же самое с остальными ячейками таблицы.
Ячейка таблицы обязательно должна иметь хоть какое-то содержимое, иначе Web-обозреватель может отобразить ее некорректно. Если же ячейка все-таки должна быть пустой, вставьте в нее неразрывный пробел (его код HTML -), как это делает в подобных случаях сам Dreamweaver.
Чтобы определить свойства таблицы - Выделите ее, кликнув для этого левой кнопкой мышки по границе таблицы. После этого, на вкладке "Properties".

Вы сможете изменить свойства таблицы и настроить ее вид.
Поле Table id - задайте имя таблицы (атрибут не обязательный)
Поля Rows и Cols - количество строк и столбцов в таблице.
Поля V и H - ширина и высота таблицы в пикселях или процентах.
Поле Align - выравнивание таблицы по левому краю, центру или правому краю
Поле CellPad - расстояние внутри ячейки (между содержимым и границей ячейки)
Поле CellSpase - расстояние между ячейками таблицы
Поле Bolder - ширина границы таблицы
Bg Color - цвет фона таблицы
Brdr Color - цвет границ для всей таблицы.
Bg Image - задание фонового рисунка для таблицы.

Там же находятся еще шесть дополнительных кнопок

• Кнопка Clear Column Widths - очистить значения ширины столбца
• Кнопка Clear Row Heights - очистить значения высоты строки
• Кнопки Convert Widths to Pixels и Convert Widths to Percent - преобразовать ширину ячеек в пиксели и преобразовать ширину ячеек в проценты
• Кнопки Convert Heights to Pixels и Convert Heights to Percent - преобразовать высоту ячеек в пиксели и преобразовать высоту ячеек в проценты

Кроме задания свойств таблицы существует и задание свойств ячейки или группы ячеек. Для задания свойств ячейки - кликните в ней левой кнопкой мышки. Если же вы хотите задать свойства группе ячеек, то после того как кликните по полю первой ячейки, не отпуская левую кнопку мышки выделите требуемые ячейки (вы можете выделить таким способом хоть всю таблицу). При выделении - границы всех добавленных ячеек будут окрашиваться в другой цвет.
После того как ячейки выделены - снова обратите внимание на панель "Properties "

Horz - горизонтальное выравнивание содержимого ячеек (по левому краю, по центру или по правому краю)
Vert - вертикальное выравнивание содержимого ячеек (по верху, посередине, по низу или по базовой линии)
В полях W и H - укажите ширину и высоту выбранных ячеек, если вам необходимо указать значения в процентах - добавте после числового значения символ %.
Bg иBrdr - установление фона ячеек и установление цвета границ ячеек. А с помощью верхнего поля Bg - вы сможете задать фоновое изображение для ячеек.
Флажок No Wrap - запрет переноса строки
Флажок Header - для форматирования выбранных ячеек как заголовок таблицы.
Теперь кликните левой кнопкой мышки внутри любой ячейки и нажмите кнопку .
При помощи этого диалога вы сможете разделить выбранную ячейку на несколько частей. Переключатели Rows и Columns - разделить на строки и столбцы соответственно. Number of... - на какое количество строк или столбцов следует делить выбранную ячейку.

Теперь выделите две ячейки и нажмите кнопку .
Две выбранные вами ячейки объединились в одну и эту новую объединенную ячейку вы можете снова делить или наоборот объединять с другими как и стандартные.
К любой таблице можно быстро применить форматирование. Для этого следует выделить таблицу и в меню “Commands ” выбрать пункт “Format Table (Форматировать таблицу)”.
И в открывшемся диалоге вы сможете настроить дизайн вашей таблицы

После выбора одного из предустановленных шаблонов вы можете изменять все его атрибуты на свой вкус.
Вы можете вырезать, вставлять или копировать ячейки таблицы.
Для того чтобы вырезать ячейку (или несколько ячеек), вам нужно выделить ее и дать команду Edit - Cut. Ячейка (или несколько) будут удалены из таблицы.
Для того чтобы скопировать ячейку (или несколько ячеек), вам нужно выделить ее и дать команду Edit - Copy. Ячейка (или несколько) будут скопированы.
Для вставки скопированных или вырезанных ячеек воспользуйтесь командой Edit – Paste.
Прежде чем двигаться дальше попробуйте свои силы в создании простейших таблиц.

Табличный дизайн

Предположим, мы делаем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара. С таблицами это проще простого.

С помощью специально отформатированной таблицы мы можем разместить несколько фрагментов текста и графическое изображение так, как нам нужно. А если нам что-то не понравится, мы можем слегка переделать эту таблицу и получить совершенно другой результат.

Web-дизайнеры давно освоили таблицы. И так же давно носилась в воздухе простая, как все гениальное, идея. А что если поместить ВЕСЬ текст Web-страницы в большую, сложно отформатированную таблицу, "растянув" ее на все окно Web-обозревателя? Ведь тогда мы получим практически неограниченные возможности, почти такие же, как у наших коллег-полиграфистов. Мы сможем создавать и примечания, и сноски, и врезки, и множественные "потоки" текста, которые будут начинаться и прерываться там, где нам нужно.

Вот мы и подошли вплотную к табличному дизайну, т. е. способу построения Web-страниц с использованием таблиц.
Основной принцип табличного дизайна уже был приведен. Весь текст и вся графика помещаются в ячейки таблицы, что позволяет делать с ними все, что угодно. Как правило, такие таблицы (назовем их таблицами разметки) имеют невидимые границы, а линейки создаются с помощью очень тонких ячеек с фоновым заполнением. Таблицы разметки очень сложны, используют различное форматирование и многократное объединение ячеек и практически всегда - вложенные таблицы.
Создание сложных таблиц разметки вручную - высший пилотаж Web-дизайна. Не всякий даже опытный Web-дизайнер возьмется делать сложные страницы на основе таблиц. И все это из-за невероятной сложности получающегося HTML-кода. Поэтому очень часто в коде Web-страниц, построенных на основе таблиц, встречаются ошибки, из-за чего их не всегда может отобразить Web-обозреватель. В самом деле, во всех этих многочисленных объединенных ячейках и в сложнейшем форматировании можно элементарно запутаться.

Шаблон - это своеобразный образец, "скелет" Web-страницы, содержащий общие для всех страниц элементы: заголовок сайта, набор гиперссылок, сведения об авторских правах, возможно, таблицу разметки и пр. Эти элементы остаются неизменными на всех страницах, созданных на основе данного шаблона, поэтому так и называются - неизменяемыми элементами. Да, но каким же образом на странице помещается ее основное содержимое?
Очень просто. Специально для этого в шаблоне создаются изменяемые области . Они предназначены для уникального содержимого страницы, которая будет создана на основе этого шаблона.

Все просто: создаем на основе шаблона страницу и вводим в изменяемые области ее основное содержимое. Неизменяемые же элементы Dreamweaver в этом случае нам править не дает, и правильно - они же неизменяемые, в конце концов. Но это не беда - мы всегда можем изменить сам шаблон.

Пусть, например, нам нужно исправить заголовок сайта. Поскольку он входит в состав шаблона, мы открываем шаблон, исправляем его и сохраняем. Dreamweaver тут же предлагает нам перенести сделанные в шаблоне изменения во все страницы, созданные на его основе. И переносит, да так аккуратно, что не затрагивает содержимое изменяемых областей! Фактически он за нас исправляет все повторяющиеся элементы на всех Web-страницах сайта. Шаблоны сохраняются в особых файлах, имеющих расширение dwt , в папке Templates , которую Dreamweaver создает сам в корневой папке локальной копии сайта. Количество шаблонов, используемых в сайте, не ограничено, так что мы можем создавать одни страницы сайта на основе одного шаблона, а другие - на основе другого. А можем вообще ограничиться одним единственным шаблоном, как, собственно, чаще всего и бывает.

Прежде чем создать шаблон создайте сайт. Зарегистрируйте его в Dreamweaver.
Теперь создадим документ и сделаем разметку.

• Создайте таблицу с шириной 100%, 2 строки и 1 столбец, граница 0.
• В первой строке сделаем фон (fon.gif) и высоту 100 пикселей.
• Далее напишите заголовок Мой сайт в заголовке страницы и в первой строке. Установите размер текста +7 и цвет жёлтый.
• Во второй строке поставьте выравнивание по вертикали Сверху.
• Вставьте еще одну таблицу с шириной 100%, 1 строкой и 3 столбцами, граница 0.
• В каждой ячейке установите выравнивание по вертикали Сверху.
• Ширина первого столбца 20%, второго 60%, третьего 20%.
• В каждый столбец вставим еще по таблице 2 строки х 1 столбец, шириной 95%, выравнивание таблицы по центру. И также выравнивание в каждой ячейке по вертикали Сверху.
• Далее заполните строки текстом как в моем примере.
• В столбце навигации установите цвет ячеек через одну зеленым цветом.

Макет нашей страницы готов. Ничего сложного делать мы не будем. В рамках данной лекции этого достаточно.
Самое время создавать шаблон и редактируемые области.

Есть два способа создать шаблон Dreamweaver. Во-первых, его можно создать "с нуля", а потом заполнить содержимым, как обычную Web-страницу.
Во-вторых, существующую страницу можно сохранить как шаблон, а потом отредактировать, удалив полезное содержимое и оставив только общие элементы. И то, и другое сделать одинаково легко.
Чтобы создать новый шаблон "с нуля" меню “File – New “

Создать новый шаблон на основе существующей Web-страницы еще проще. Для этого откройте нужную Web-страницу, выберите в меню “File “ пункт ”Save as Template “ (Сохранить как шаблон). Также вы можете нажать кнопку Make Template (Создать шаблон) панели объектов. На экране появится диалоговое окно ”Save As Template ”.

В раскрывающемся списке Site выбирается сайт, в котором сохраняется шаблон. (Шаблоны являются неотъемлемой собственностью сайта, помните) По умолчанию там выбран текущий сайт.

Само имя шаблона вводится в поле ввода Save As . Давайте назовем наш новый шаблон main ("главный"), поскольку это наш главный шаблон, на основе которого мы построим наш сайт.
Введя все нужные данные, нажмите кнопку Save (Сохранить) для сохранения шаблона.
После того как мы создадим новый шаблон, последний появится в списке шаблонов. А поскольку мы создали этот новый шаблон на основе существующей Web-страницы, т. е. он имеет содержимое, мы можем просмотреть его на панели предварительного просмотра. Правда, эта панель очень мала, и, чтобы получить представление о содержимом шаблона, нам придется открыть его в окне документа.

Правка шаблона

Пустой шаблон нужно наполнить содержимым. Шаблон, созданный на основе Web-страницы, необходимо отредактировать: убрать уникальное для этой страницы содержимое, оставив только общие для всех страниц сайта элементы. Для этого нам нужно будет открыть шаблон в окне документа, как обычную Web-страницу.
На экране появится окно документа, в котором будет открыт выбранный нами шаблон. Внешне он ничем не будет отличаться от обычной Web-страницы.
Что мы можем сделать с шаблоном? Все, что угодно. Можно считать его обычной Web-страницей с некоторыми особенностями. (Эти особенности мы опишем далее.) Мы можем набирать текст, форматировать его, размещать изображения, таблицы, гиперссылки, переключаться в режим разметки страниц и создавать таблицы и ячейки разметки, создавать наборы фреймов, "чистить" HTML-код и т. д.
Но все-таки шаблон - не Web-страница и имеет некоторые особенности. Так, нам нужно будет поместить на нем изменяемые области, в которых впоследствии будет находиться основное содержимое страниц. (Более того, нам обязательно нужно будет это сделать, иначе зачем нам тогда этот шаблон.) Как это сделать, мы узнаем чуть позже.
Откроем шаблон main, который мы создали на основе страницы default.htm (если он еще не открыт).

Теперь нам нужно поместить в шаблон изменяемые области. Пока что изменяемая область будет всего одна- основное содержимое страницы. И располагаться она будет в самой большой ячейке нашей таблицы разметки. Колонку новостей и панель навигации мы пока оставим в покое.

Создание изменяемых областей

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

Первый способ лучше всего подходит, если мы создали шаблон "с нуля", а второй - если мы преобразовали в шаблон существующую страницу.

Создать в шаблоне пустую изменяемую область очень просто. Для этого сначала ставим текстовый курсор в то место, где мы хотим создать пустую изменяемую область и решаем, чем воспользоваться:

• инструментарием объектов, нажав кнопку Templates на вкладке Common и выбрав в появившемся меню пункт Editable Region;

• контекстным меню, выбрав в его подменю Template пункт New Editable Region;
• системным меню, выбрав в подменю Template Objects меню Insert пункт Editable Region;
• клавиатурой, что быстрее всего, - достаточно нажать ++.

На экране после этого появится диалоговое окно New Editable Region.
В единственном поле ввода Name, находящемся в этом окне, вводится уникальное имя вновь создаваемой изменяемой области. Каждая созданная нами в шаблоне изменяемая область должна иметь уникальное имя. Это имя может содержать любые символы, кроме букв русского алфавита, кавычек, апострофа и знаков "<", ">" и "&". Введя имя, нажмем кнопку ОК, чтобы создать изменяемую область, или Cancel для отказа от этого.

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

Dreamweaver при создании любого шаблона автоматически создает небольшую изменяемую область doctitle. (Поэтому мы и не сможем дать изменяемой области имя doctitie - изменяемая область с таким именем уже существует). Данная изменяемая область включает в себя содержимое тега