Домой / Социальные сети / Установка шаблона в Dreamweaver. Установка шаблона в Dreamweaver Dreamweaver создание страницы на основе шаблона

Установка шаблона в Dreamweaver. Установка шаблона в Dreamweaver Dreamweaver создание страницы на основе шаблона

29.03.2020 Социальные сети

Web-страницы и Web-сайты

Что такое Web-страница? Ответить на этот вопрос могут многие. Это интернет-документ, предназначенный для распространения через Интернет посредством сервиса WWW. А если уж говорить по-простонародному, это то, что показывает в своем окне программа-клиент для просмотра Web-страниц - Web-обозреватель (браузер).

С технической точки зрения Web-страница - это обычный текстовый файл, который можно создать в любом текстовом редакторе, том же Блокноте, стандартно поставляемом в составе Windows. Этот файл содержит собственно текст Web-страницы и различные команды форматирования этого самого текста. Команды форматирования называются тегами , а описывает их особый язык HTML (HyperText Markup Language), язык гипертекстовой разметки.

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

Зачем нужны Web-редакторы?

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

Многие не знают HTML, более того - не хотят его изучать или не имеют на это времени. Но создавать Web-страницы хотят. Поэтому специально для них программисты написали множество программ, предназначенных для создания Web-страниц.

Одна из таких программ написана разработчиками из фирмы Macromedia и называется Macromedia Dreamweaver . Первая ее версия вышла еще в далеком 1998 году; в настоящее же время доступна версия 8.

Именно с Dreamweaver мы и будем работать.
Dreamweaver - типичнейший представитель визуальных Web-редакторов, работающих по принципу WYSIWYG (What You See Is What You Get, "что ты видишь, то ты и получишь"). При этом пользователь форматирует текст и в окне редактора сразу же видит результаты своих трудов.

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

Здесь нужно сказать, что практически все серьезные Web-редакторы имеют режим правки непосредственно самого кода HTML (т. е. фактически являются гибридными Web-редакторами). Поэтому сейчас практически всегда, когда говорят "визуальный Web-редактор", подразумевают как раз гибридные программы. Разумеется, к их числу относится и Dreamweaver , с которым нам пора познакомиться поближе.

Введение

При самом первом запуске программы, вам будет предложено выбрать рабочую среду. Давайте создадим новый документ "File ->New " (Файл-Новый)

На этой вкладке создайте новый документ, выбрав Basic Page (Базовая страница) -> HTML.
Перед вами откроется рабочее окно программы.

И на вновь созданной странице напишите какой-нибудь текст, состоящий из русско-английских слов. Для примера: "полезная информация по работе с программой DreamWeaver ".
После чего сохраните страницу командой "File - Save as ", но саму страницу не закрывайте в редакторе, а теперь откройте вновь созданную страницу в браузере, - что у вас получилось? В моем случае отобразилась такая вот надпись

Поэтому первое с чего стоит начать - это обучить DreamWeaver кириллице. Главное меню Edit (Редактировать) – Preferences (Настройки), в открывшемся диалоге выберите категорию New Document (Новый документ) и на этой вкладке в списке "Default Encoding", выберите "Cyrillic (Windows-1251)". Далее в левой части этого диалога выберите пункт "Fonts (Шрифты)" и в списке "Font Setting (Настройки Шрифта)" выберите пункт "Cyrillic (Кириллица)".

Здесь вы так же можете настроить отображение текста (выбрать шрифты и установить размер букв), который будет использоваться по умолчанию. Для завершения нажмите "ОК ". После чего создайте еще одну страницу и впишите какой-либо текст, сохраните ее "File - Save " и откройте сохраненную страницу. Теперь все в порядке, НО! Любая веб - страница, где в теге Meta, явным образом не будет указана кодировка "charset = windows-1251" будет "перегоняться" в кодировку "Cyrillic (ISO-8859-5)"



Чтобы это не происходило, откройте файл: (Ваш диск \Program Files\ Macromedia\ Dreamweaver 8\ Configuration\ Encodings\ EncodingMenu.xml) и в списке кодировок найдите четыре кодировки Кириллицы, идущие друг за другом

Таблица 1

Отредактируйте этот файл в "Блокноте", поменяв местами кодировки "ISO-8859-5" и "Windows-1251", чтобы порядок следования кодировок Кириллицы принял следующий вид

Таблица 2




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

Интерфейс

Теперь давайте снова вернемся к рабочей среде программы.

Для переключения режима отображения рабочей среды (режимов всего три: Code (Код), Design (Дизайн) и Code and Design на панели инструментов или главное меню "View "(Вид).

Выберите из этих режимов тот, с которым вы можете/умеете работать, хотя предпочтительно оставить "Code and Desig", тогда рабочее окно как бы разделится на две части и вы сможете видеть и сам HTML-код и страницу в режиме WYSIWYG.

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

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

Группы панелей всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы мы могли всегда получить к ним доступ, вне зависимости от того, какое окно сейчас активно.
Если же мы захотим убрать какую-либо из этих групп, мы можем "вынести" ее за пределы окна документа или вообще закрыть, раскрыв ее дополнительное меню и выбрав пункт Close panel group. Теперь обратим внимание на правый край главного окна, где находится множество всяческих групп панелей. Это так называемый док - область, специально для них предназначенная. Док отделен от остального пространства главного окна толстой серой полосой, которую мы можем перетаскивать мышью, изменяя размеры дока. Мы также можем щелкнуть мышью довольно приметную кнопку на доке, чтобы быстро скрыть его со всеми.

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

  • инструментарий объектов
  • инструментарий документа

    стандартный инструментарий, предоставляющий доступ к операциям с файлами (создание, открытие и сохранение Web-страницы), буфером обмена и пр., изначально скрыт.

Чтобы вывести эти панели на экран главное меню “Вид (View) – Панели инструментов (Toolbars)” (соответствующие панели (Insert, Document, Standard).

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

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

Если нам необходимо держать на виду сразу два окна или больше, стоит воспользоваться пунктами меню “Window - Cascade, Tile Horizontally или Tile Vertically”. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в главном окне так, что мы сможем видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в главном окне "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий - по вертикали.

Определение сайта в Dreamweaver

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

Для того чтобы создать новый сайт, воспользуйтесь пунктом New site (Новый сайт) меню Site (Сайт). После выбора на экране появится диалоговое окно Site Definition (Определение сайта), состоящее из двух вкладок.

Если оно открыто на вкладке Basic (Основные), переключитесь на вкладку Advanced (Дополнительно) - она предоставляет больше возможностей по настройке вашего сайта.
Как видите, в левой части этого окна находится список вкладок второго уровня. Переключитесь на вкладку Local Info (Локальная информация), где задается информация о файлах вашего сайта, находящихся на жестком диске вашего компьютера (локальной копии сайта).

В поле ввода Site Name (Имя сайта)вводится имя сайта. Оно служит только для того, чтобы вам самим было удобно с этим сайтом работать. Назовите сайт "proba".

В поле ввода Local Root Folder (Локальный корневой каталог)указывается путь к корневой папке локальной копии сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода, и выбрать нужную папку в появившемся на экране диалоговом окне.

Флажок Refresh Local File List Automatically (Обновить локальный список файлов автоматически)включает или отключает автоматическое обновление списка файлов локальной копии сайта. Если вы оставите его включенным, список файлов сайта всегда будет обновляться автомагически, как только Dreamweaver становится активным. Если же вы выключите вышеназванный флажок, вам самим придется обновлять список файлов сайта, но Dreamweaver будет активизироваться быстрее.

В поле ввода Default Images Folder (Папка с картинками по умолчанию)вводится имя папки, в которой по умолчанию будут располагаться все графические изображения, помещаемые вами на Web-страницы сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода и выбрать нужную папку в появившемся на экране диалоговом окне. Введите в это поле “pic”.

В поле ввода HTTP Address вводится интернет-адрес вашего сайта. Не вводите в это поле ничего.

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

После нажатия кнопки “Готово ” в панели Файлы отобразится список файлов сайта, изначально там нет файлов, но они появятся по мере Вашей работы.

Основа практически любой страницы - это текст. Создайте новую страницу (File - New) и наберите в ней любой текст.

Текст набирается с помощью клавиатуры (а вы как думали?), при этом Dreamweaver самостоятельно разобьет текст на строки.

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

И тогда в любом браузере, в его заголовке можно будет прочесть

Сохраните эту страницу, дав ей какое-либо имя. Главным страницам сайтов или директорий дают название: index.htm , index.html , index.php и так далее.

Для форматирования абзацев целиком удобнее пользоваться раскрывающемся списком "Format (Формат)" на панели "Properties (Параметры)".

Если эта панель у вас не открыта - кликните на треугольник рядом со словом "Properties (Параметры)".

В примере приведены примеры форматирования абзацев, сам процесс достаточно прост: кликаете мышкой по любому абзацу и в списке "Format (Формат)" выбираете один из шести пунктов.
Если вы хотите форматировать не абзацы, а только выбранные слова, выражения или символы – то вам пригодятся остальные пиктограммы.
Для задания размера символов воспользуйтесь пунктом "Size (Размер)".
Вы можете выбрать шрифт текста - список "Default Font " . Причем для разных символов или слов вы можете установить разные шрифты.

Для выравнивания текста можно воспользоваться этими 4 кнопками. Интересная деталь: если щелкнуть еще раз по нажатой кнопке-переключателю, она "отожмется". В этом случае для абзаца будет установлено выравнивание по умолчанию, обычно - по левому краю.

    • по левому краю;
    • по центру;
    • по правому краю;
    • по ширине.

Для задания (увеличения/уменьшения) отступа абзацев можно воспользоваться пунктами
При каждом нажатии пункта "Indent" отступ будет увеличиваться, а при нажатии на "Outdent" наоборот уменьшаться.

Cделаем некоторые слова на нашей Web-странице полужирными и курсивными. И помогут нам в этом две кнопки изменения начертания . А вот чтобы включить или отключить подчеркивание текста линией , нам все равно придется воспользоваться пунктом-выключателем Underline подменю Style (Стиль) меню Text (Текст) или контекстного меню. Ни кнопки, ни комбинации клавиш для этого действия не предусмотрено.


Пункт

Описание

Teletype

Текст, выведенный устройством вывода компьютера ("телетайп")

Emphasis

Обычный курсивный текст

Обычный полужирный текст

Фрагмент исходного кода программы на каком-либо языке програм-мирования (команд, имен переменных, ключевых слов и т. п.)

Variable

Используется для обозначения в тексте имен переменных програм-мы на каком-либо языке программирования

Информация, выведенная какой-либо программой пользователю

Keyboard

Текст, который пользователь должен ввести с клавиатуры

Citation

Definition

Определение какого-либо термина

Текстовые редакторы поддерживают создание нумерованных и маркированных списков. Пункты нумерованных (упорядоченных) списков, как вы знаете, обозначаются порядковыми номерами, а пункты маркированных (неупорядоченных) списков - какими-либо значками. Давайте и мы создадим такой список.
Для того чтобы преобразовать выделенные строки в список, воспользуемся кнопками-переключателями редактора свойств .
Поставьте текстовый курсор на любом пункте списка, В контекстном меню выберите пункт “Список – Свойства ” и появится диалоговое окно List Properties , с помощью которого мы можем задать некоторые параметры списка. Изменить стили маркеров или нумерацию (например: использовать буквы вместо цифр - a b c d;), а так же, для нумерованных списков, задать число, с которого следует начинать нумерацию. Поля ввода "List Type " (три верхних) - - позволяют задать тип всего списка, в то время как поля ввода "List Item" (два нижних поля) - относятся только к той строке списка, на которой в настоящее время установлен курсор мыши.

Текст можно покрасить во все цвета радуги-:) Для этого выделите какую-либо часть текста и нажмите на кнопку .
В открывшемся диалоге представлена палитра цветов

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

Часто бывает нужно вставить дату создания или последнего редактирования документа, в этом вам поможет кнопка "Date (Дата)" или (Insert (Вставить)- Date (Дата)). В открывшемся диалоге

Вы можете установить вариант отображения даты, а так же при желании и день недели и время. Если вы установите галочку в "Update Automatically on Save " - тогда после каждого обновления/редактирования страницы дата будет обновляться.
Так же у вас есть возможность вставлять специальные символы воспользовавшись вкладкой "Text".

Еще одна полезная функция - это чистильщик HTML-кода. Вызвать его можно командой "Command - Clean Up XHTML " и пред вами откроется окошко этого диалога.

Иногда необходимо разделить информацию и для этого ставят горизонтальную линию. На панели “Вставить ” вкладка “HTML ” кнопка . У горизонтальной линии есть свойства Ширина, Высота и Цвет. Для установки Ширины и Высоты в панели “Properties ” необходимо указать требуемые значения в полях W и H .
Для задания цвета линии выделите линию и в контекстном меню Редактировать тег (Edit Tag) …
В диалоговом окне выберите требуемый цвет линии.

Связи и навигация

Существует несколько способов создания гипертекстовых ссылок на различные типы файлов. Начать следует с создания навигации по сайту. Для создания связи между файлами нужно точно указать путь, по которому можно добраться до нужного документа.
Путь может быть как полный - начинаться с указания интернет адреса (например: http:// Dreamweaver/index.htm), так и корнезависимый (../index.htm). Давайте рассмотрим, как процесс задания связей между документами реализован в DreamWeaver.
Для того чтобы сделать из любого слова или нескольких слов гиперссылку - достаточно "прицепить" к нему интернет адрес. Для наглядности сделаем так, - в тексте "Macromedia DreamWeaver. Практикум" выделите словосочетание " Macromedia DreamWeaver." и в поле "Link" вкладки "Properties" введите начальный адрес этого руководства (http://Dreamweaver/) и нажмите "Enter".

Как вы смогли заметить - слова " Macromedia DreamWeaver. Практикум" изменили цвет и стали гиперссылкой. Для удаления гиперссылки - просто удалите интернет адрес в поле "Link" вкладки "Properties" и так же нажмите клавишу "Enter". Теперь перейдем к корнезависимому пути.

Выделив " Macromedia DreamWeaver" нажмите кнопку с изображением папки

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

Теперь поставьте курсор мыши на эту ссылку и раскройте список "Target " вкладки "Properties ".
В этом списке имеется четыре пункта, причем в нашем случае работать будут только два. Первый пункт "_self" - выведет страницу на которую указывает гиперссылка в том же окне обозревателя (этот режим устанавливается по умолчанию), и второй - "_blank" - раскроет страницу в новом окне.
Остальные пункты меню "Target" понадобятся для работы с фреймами.

Когда вы создаете сайт, то начальная папка этого сайта является корневой, а в ней уже находятся разные файлы и другие вложенные папки.
Если вы посмотрите на HTML - код этой гиперссылки, то увидите, что он принял следующий вид../index.htm. Причем эти две точки перед черточкой говорят браузеру "подняться" на один уровень вверх по дереву каталога. На два уровня вверх - ../../index.htm и так далее.

Если вы хотите вставить почтовый адрес, то для этого необходиом ввести в поле "Link" вкладки "Properties" адрес электронной почты (например: mailto: vsh@ dvpion.ru ), любая ссылка на почтовый адрес начинается с mailto: , хотя если вы в силу каких-то обстоятельств не хотите руками вписывать слово "mailto: ", тогда можете на вкладке "Common" нажать кнопку , где в поле "Text" впишите текст ссылки, а в поле "E-Mail" - адрес электронной почты. И в том и другом случае эффект будет тот же.

Якоря

Еще один тип ссылок - "якоря". Использовать этот тип ссылок особенно полезно при большом количестве информации расположенной на одной странице.
Давайте установим переход вверх текущей страницы. Первое что нужно будет сделать - это установить сам якорь на странице.
И нажать кнопку на вкладке "Common". В открывшемся диалоге укажите имя якоря имя "new_page_11_top".
Теперь осталось только установить здесь ссылку на этот якорь. Для этого нужно выделить текст, и в поле "Link" вкладки "Properties " ввести адрес гиперссылки ссылающейся на этот якорь: #new_page_11_top

Решетка (#) перед именем якоря - это и есть команда браузеру "направиться" к отметке под именем new_page_11_top.
Если вы хотите сослаться на якорь, расположенный на другой странице, тогда укажите путь до самой страницы с якорем. Для примера, я хочу направить посетителей на страницу с "примерами якорей". Так как имя страницы с примерами - examples.htm , а якорь, на который я хочу перенаправить, имеет имя 02 , то и ссылка будет иметь следующий вид: (examples.htm#02).

Работа с графикой

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

Вставка графического изображения

Поместим текстовый курсор в нужное нам место и посмотрим на вкладку “Common ” инструментария объектов - там находится кнопка “Image (Изображение)”. Нажмем на нее и в появившемся на экране меню выберем пункт Image . Также можно воспользоваться пунктом Image меню Insert или нажать ++. После этого на экране появится диалоговое окно Select Image Source .

Раскрывающийся список папок и список файлов позволят нам выбрать нужную папку и файл.
В поле ввода Имя файла появится имя выбранного файла (или мы можем сами ввести его туда). А раскрывающийся список Тип файлов позволит нам выбрать, какой тип файлов нам нужно найти. Все это знакомо нам по стандартным диалоговым окнам открытия и сохранения файлов 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 - изменяемая область с таким именем уже существует). Данная изменяемая область включает в себя содержимое тега , иначе говоря, название Web-страницы.<br><b><i>Внимание! </i> </b><br> После того, как на основе шаблона были созданы какие-либо Web-страницы, вы не сможете переименовать ни одну из имеющихся в нем изменяемых областей.<br> И, наконец, может случиться так, что вы захотите удалить изменяемую область. Сделать это можно двумя способами: простым и очень простым. Очень простой способ заключается в том, чтобы выбрать изменяемую область щелчком по заголовку и нажать клавишу <Del>. Простой способ - поставить текстовый курсор куда-либо внутрь содержимого изменяемой области и выбрать пункт <b>Remove Editable Markup </b> подменю <b>Templates </b> меню <b>Modify </b> или контекстного меню. Учтите, что после удаления изменяемой области ее содержимое остается в шаблоне. Так что, если вы хотите удалить всю изменяемую область, вам также придется удалить ее содержимое.</p> <h3><b><span>Создание Web-страниц на основе шаблонов </span> </b></h3> <p>Создать Web-страницу на основе шаблона можно двумя способами. Первый способ заключается в том, чтобы использовать уже знакомый нам пункт <b>New </b>меню <b>File. </b>При этом на экране появится диалоговое окно <b>New Document, </b>переключаемся на вкладку <b>Templates. </b> <br> В списке <b>Templates for </b>выбирается сайт, из которого будет взят шаблон. Сам же шаблон выбирается в списке <b>Site <i><имя cauma>. </i> </b>Если флажок <b>Update page when template changes </b>включен (а он включен по умолчанию), при изменении шаблона, на основе которого создается Web-страница, последняя будет соответственно изменена. И лучше этот флажок не отключать. <br> На экране появится окно документа, содержащее в себе новую Web-страницу. <br> Созданная нами изменяемая область выделена синей рамкой. Кроме ее содержимого, ни один другой элемент страницы не может быть изменен; при наведении на него курсора мыши последний меняет форму на перечеркнутый круг. Мы даже не сможем выделить ничего из содержимого шаблона - только содержимое изменяемых областей.</p> <p>Более того, если мы переключимся в режим отображения HTML-кода, то и тогда не сможем исправить содержимое самого шаблона. HTML-код, принадлежащий шаблону, будет набран тускло-серым цветом - это предостережение для нас. Как видим, шаблон надежно защищен от редактирования. <br> Ну что ж, приступим к работе! Ставим текстовый курсор в изменяемую область, удаляем старое ее содержимое, оставшееся в "наследство" от шаблона, и вводим новое. Если же мы не хотим набирать это содержимое заново (у нас, в конце концов, есть готовая Web-страница, на основе которой мы создали этот шаблон), то можно воспользоваться методом, которые бывалые компьютерщики называют "копируй-и-вклеивай". Открываем старую Web-страницу,<br> копируем ее основное содержимое в буфер обмена и вставляем ее в изменяемую область. Что может быть проще и быстрее!</p> <h3><b><span>Обновление страниц, созданных на основе шаблонов </span> </b></h3> <p>Теперь предположим, что мы создали на основе шаблона несколько страниц и уже после этого вдруг заметили, что в содержимое шаблона вкралась ошибка. Мы вызываем шаблон на экран, правим его и сохраняем. Что произойдет в этом случае? А произойдет вот что. Сначала Dreamweaver выведет на экран диалоговое окно <b>Update </b><b>Template </b><b>Files </b><b>, </b>После этого Dreamweaver выведет на экран еще одно диалоговое окно <b>Update Files, </b>содержащее сведения об обновленных страницах; закроем его щелчком по кнопке <b>Close. </b></p> <p>К сожалению, у нас мало времени на изучение и мы очень быстро и кратко рассмотрели возможности работы в программе DreamWeaver. Если вы хотите более глубоко изучить данный материал, интересно создавать Web--страницы и сайты, то вам следует записаться на курс Web-проектирование или Web-дизайн.</p> </td> <p>Шаблоны Dreamweaver решают проблему, с которой сталкиваются многие компании – как поддерживать сайт и оставлять стандартные разделы стандартными. Обычным решением является использование SSI (Серверные вставки), но не все веб-сервера поддерживают эту технологию. Есть другие способы, посредством которых можно включить один html-файл в другой, но все они используют или программы на стороне сервера, или java-скрипты на на стороне пользователя.</p> <p>Шаблоны Dreamweaver позволяют создавать шаблон страницы, который постоянно находится в одной области вашего сайта, и в последующем создавать другие страницы, основываясь на этом шаблоне. Потом, при внесении изменений в шаблон, изменятся также страницы, использующие шаблон.</p> <p><b>1. Начинаем с макета </b></p> <p>Самый простой способ создания шаблона на Dreamweaver – начать с макета, на основе которого вы хотите создать шаблон. Я использую усовершенствованную версию <a href="/browsing-the-internet/ustanavlivaetsya-shablon-joomla-3-kak-ustanovit-novyi-shablon-na-joomla-poisk.html">бесплатного шаблона</a>: слева – навигация, вверху – шапка, а также фото и цвета.</p> <p>Так как существует возможность создания шаблона Dreamweaver с нуля, многие считают, что легче сначала сделать дизайн, а потом решить, что в нем будет изменяться, а что будет частью шаблона.</p> <p><img src='https://i1.wp.com/web-profy.com/wp-content/uploads/2012/09/Kak-sdelat-shablon-dreamweaver.gif' height="479" width="265" loading=lazy></p> <p>Примечание. Шаблоны Dreamweaver создаются как часть сайта Dreamweaver. Если у вас не определён ни один сайт, вам нужно создать сайт в Dreamweaver перед созданием шаблона.</p> <p><b>3. Сделайте описание шаблона </b></p> <p><img src='https://i2.wp.com/web-profy.com/wp-content/uploads/2012/09/opisanie-shablona.gif' height="237" width="372" loading=lazy></p> <p>Выберите сайт, на котором вы хотите использовать шаблон. Я буду его использовать на сайте «Dreamweaver Examples». Название вашего сайта будет отличаться.</p> <p>Опишите шаблон. Описание может быть настолько коротким или длинным, насколько вам это необходимо. Однако не скупитесь на детали, они могут быть важными в будущем.</p> <p><b>4. Создание папки для хранения шаблонов </b></p> <p><img src='https://i0.wp.com/web-profy.com/wp-content/uploads/2012/09/papka_dlya_shablona.gif' height="191" width="280" loading=lazy></p> <p>У моего сайта уже есть папка для шаблонов. Но если её не было, Dreamweaver автоматически создаст такую.</p> <p>Все шаблоны Dreamweaver хранятся в папке «templates» на вашем сайте, и имеют расширение *.dwt (сокращенно от Dreamweaver Template).</p> <p><b>5. Начинаем добавлять редактируемые области </b></p> <p><img src='https://i0.wp.com/web-profy.com/wp-content/uploads/2012/09/redaktiuem-maket.gif' width="100%" loading=lazy></p> <ul><li>Выберите часть текста, которую хотите сделать изменяемой.</li> <li>Перейдите в пункт меню Вставка — Объекты шаблона.</li> <li>Выберите «Редактируемая область».</li> </ul><p>Есть и другие объекты шаблона, но они выходят за рамки данного урока.</p> <p><b>6. Задайте имя Редактируемой области </b></p> <p><img src='https://i0.wp.com/web-profy.com/wp-content/uploads/2012/09/name-templates.gif' height="150" width="354" loading=lazy></p> <p>Вы можете оставить имя, которое Dreamweaver задал по умолчанию, но я рекомендую задать описывающее имя, что позже напомнит вам, какая именно информация должна содержаться в этой области.</p> <p><b>7. Редактируемые области в блочных элементах </b></p> <p><img src='https://i1.wp.com/web-profy.com/wp-content/uploads/2012/09/Editable-Regions-in-Blocks.gif' height="190" width="368" loading=lazy></p> <p>Если вы попробуете разместить редактируемые области внутри блочных элементов (таких как заголовок, параграф), Dreamweaver выдаст предупреждение. Если вы оставите область внутри блочного элемента, ваши авторы контента не смогут внедрить туда какие-либо другие HTML-элементы.</p> <p>Я использую это, когда хочу убедиться, что заголовок останется заголовком, или необходимо конкретное количество параграфов или других элементов в шаблоне.</p> <p>Если вы решили оставить возможность добавлять другие блочные элементы внутри данного элемента, тогда вам нужно перенести границы редактируемой области за теги элемента. Вы можете это сделать в режиме отображения HTML-кода, или заново указав область, предварительно её удалив.</p> <p><img src='https://i0.wp.com/web-profy.com/wp-content/uploads/2012/09/View-the-Finished-Template.gif' width="100%" loading=lazy></p> <p>В <a href="/browsing-the-internet/lending-shablon-avtoservisa-ili-avtomasterskoi-gotovyi-lending---avtoservis.html">готовом шаблоне</a> редактируемые области выделяются рамками, над которыми будет имя области.</p> <p><b>9. Создаем страницу на основе шаблона </b></p> <p><img src='https://i2.wp.com/web-profy.com/wp-content/uploads/2012/09/Create-a-New-Templated-Page.gif' width="100%" loading=lazy></p> <p>Как только вы сохраните шаблон, можете его использовать на сайте:В меню Файл выберите «Создать»;</p> <ul><li>Перейдите ко вкладке «Страница из шаблона»;</li> <li>Выберите созданный шаблон;</li> <li>Удостоверьтесь, что выбран пункт «Обновлять страницу при изменении шаблона»;</li> <li>Нажмите «Создать».</li> </ul><p>Теперь вы можете вносить изменения, но только в редактируемые области. Dreamweaver не позволит вам изменять другие части шаблона.</p> <p><b>10. Измените шаблон – обновите файлы </b></p> <p><img src='https://i0.wp.com/web-profy.com/wp-content/uploads/2012/09/Change-Template.gif' width="100%" loading=lazy></p> <p>Если позже вам необходимо внести какие-то изменения в шаблон, отредактируйте файл dwt в папке «Templates». Как только вы сохраните изменения в шаблоне, Dreamweaver спросит не хотите ли вы обновить страницы, созданные на основе шаблона. Он также укажет, какие это файлы.</p> <p>Как только вы кликните «Обновить», все файлы, созданные на основе этого шаблона, будут обновлены. Вам только остается сохранить их и загрузить на веб-сервер.</p> <span> <p>Продолжаем серию статей, посвященных созданию одностраничника в программе «Dreamweaver» и в этой очередной статье рассмотрим html шаблон на основе одностраничника.</p> <p>Будем создавать наш html шаблон на основе уже готового образца простейшей «воронки» привлечения потенциальных дистрибьюторов (клиентов) или подписчиков.</p> <p>В прошлой статье «Как самому сделать свой сайт в программе Dreamweaver» мы немного изучили программу «Dreamweaver» и создали через нее свою первую html страницу.</p> <p>Если говорить о том, почему я начал эту тему (тему создания одностраничников или как еще говорят, создания воронки привлечения потенциальных клиентов, дистрибьюторов, то…</p> <p>Дело в том, что я неоднократно сталкиваюсь с тем, как многие люди просто не понимают очевидного. Именно того, что для того, чтобы качественно создавать свои одностраничные сайты и наладить систему привлечения именно этим способом, даже не желательно, а просто необходимо ориентироваться в языках верстки, уметь создавать простейший html шаблон и в случае необходимости, вносить в него дополнительные изменения.</p> <p>Вам не надо знать все в совершенстве. Надо лишь знать то, что необходимо для решения Ваших задач. И, как Вы поняли, одна из задач - иметь стойкий навык создания одностраничника. Довести этот навык до того, чтобы Вы в любой момент смогли создать нужный Вам html шаблон для любых целей.</p> <p>Это может быть html шаблон для одностраничника, для выпуска рассылки, для сайта визитки, для продающей страницы, а также html шаблон для различных произвольных вставок на Вашем сайте.</p> <p>Чтобы там не говорили, а техническая составляющая Вашего сетевого бизнеса или бизнеса, основанного на продаже инфо-продуктов очень важна.</p> <p>Как я и говорил в прошлой статье, в настоящее время очень много сервисов для создания одностраничных сайтов, на которых предлагаются различные технологии для <a href="/master-pc/html-sozdanie-i-dobavlenie-favikona-kakie-ikony-nuzhno-imet-doma-kak-pravilno-ih.html">создания html</a> шаблона.</p> <p>Однако, <b>во-первых </b>, такие сервисы устаревают и с течением времени уже не отвечают тем требованиям, которые предъявляют современные технологии.</p> <p><b>Во-вторых </b>, если Вы слабо или вообще не ориентируетесь в html верстке, то Вам будет очень сложно делать на таких сервисах изменения, нужные именно Вам. Однако, если Вы кровно заинтересованы в том, чтобы Ваша конверсия по привлечению партнеров увеличивалась, Вам просто необходимы навыки создания html шаблона.</p> <p><b>В-третьих </b>, - в случае, если Вы лишь поверхностно изучите эту тему, будет страдать Ваша индивидуальность, Ваш стиль и, как следствие - <b>Ваш Бренд </b>.</p> <p>Вот и получается, что очень многие «ведутся» на разного рода продукты, покупают различные пакеты и сервисы, копируют то, что во многих случаях не работает, а затем удивляются, почему так мало отдачи от их бизнеса.</p> <p>Проблема еще и в том, что даже купив <a href="/shopping/chto-znachit-bez-touch-id-chto-znachit-aifon-bez-touch-id-stoit-li-pokupat-podobnyi.html">подобные продукты</a>, люди сталкиваются с различным «подводными камнями», опускают руки и, в итоге «забрасывают» все это, даже не сделав попыток выяснить истинные причины неудач.</p> <p>Самое интересное, что эти ошибки и неудачи в бОльшей степени связаны именно с технической составляющей html верстки, изучением каскадных таблиц стилей (css), а также понимаем того, а что вообще представляют из себя внутренности созданной <a href="/internet/perevodit-stranicu-na-russkii-avtoperevod-stranic-v-opere-na.html">html страницы</a>.</p> <h3>Создаем локальный сервер и подготавливаем почву для создания первого html шаблона</h3> <p>Итак, начинаем создавать наш первый html шаблон в программе «Dreamweaver».</p> <p>В прошлом видео и статье мы познакомились с программой «Dreamweaver», а также научились вставлять на нашем <a href="/browsing-the-internet/s-pomoshchyu-tega-i-mozhno-kak-sdelat-krasivyi-shrift-v-html-razmery.html">простейшем html</a> шаблоне несколько элементов (или, как еще говорят, - блоков).</p> <p>Также мы создали специальную папку, где разместили нужные нам файлы для работы.</p> <p>Сейчас мы с Вами научимся создавать более сложную вещь - локальный сервер. Он нужен для того, чтобы мы без помощи Интернета могли создавать, настраивать и тестировать наши созданные html шаблоны.</p> <p>Т.е. при создании <a href="/internet/kak-sozdat-setevoi-server-kak-sozdat-lokalnyi-server-razvorachivaem.html">локального сервера</a> на Вашем жестком диске создается виртуальный раздел (диск), который имитирует Интернет. Соответственно, когда мы установим локальный сервер на Ваш <a href="/skype/dolzhen-li-shumet-zhestkii-disk-shumit-i-treshchit-zhestkii-disk-pri.html">жесткий диск</a>, путь до Вашей html страницы будет выглядеть так, как если бы Вы находились в Интернете.</p> <p>В качестве локального сервера для создания нашего <b>html шаблона </b> мы будем использовать «Denwer».</p> <p>Сразу хочу немного остановить Вас. Модификаций «Denwer» много и много к нему есть дополнений. Поэтому, если Вы перейдете на основной сайт для скачивания, то хотя его и будет достаточно для наших задач, однако я рекомендую Вам скачать именно ту версию и сборку, <b>ссылка на которую находиться ниже </b>.</p> <p>В этой сборке есть очень важный компонент - «Zend Optimizer», который нам потребуется в дальнейшем для настройки очень важного скрипта для повышения конверсии Ваших html-страниц.</p> <p>Для того, чтобы установить локальный сервер у себя на жестком диске, просто запустите исполняемый файл и следуйте инструкциям, которые появятся у Вас на экране.</p> <p>Более подробно об установке и настройке локального сервера, я рассказал и показал в специально созданном видеоуроке.</p> <h3>Html шаблон на примере</h3> <p>Html шаблон, который мы будем рассматривать, является простейшим, однако в настоящее время конверсия на такие одностраничники еще достаточно высока. Поэтому Вы смело можете размещать такой вид html шаблона на своих сайтах.</p> <p>На что следует обратить внимание…</p> <p>Я постарался сделать урок так, чтобы для Вас это было не трудно, т.к. понимаю, что многие еще не совсем хорошо знают язык html-верстки, а также каскадные таблицы стилей. Поэтому, в уроке подробно объясняется, с помощью каких кнопок можно сделать свой одностраничный сайт без этих знаний и умений.</p> <p>Вообщем, смотрите урок, все необходимые файлы (если еще не скачали) и создавайте свой одностраничник в визуальном редакторе html «Dreamweaver».</p> <p><b>P.S. </b> В уроке небольшая ошибка, которую я заметил уже после создания видео. Пояснения смотрите в самом видео.</p> <p><b>P.S. </b> В следующей статье я подготовлю видео, в котором покажу «продвинутый» способ создания одностраничного сайта на основе самых популярных html шаблонов Рунета.</p> <p><i>С уважением, Андрей Аверьков </i></p> <p>#averkovteam #млм #сетевоймаркетинг #работадома #рекрутинг #млмбизнес #социальныесети</p> </span> <p>Сейчас весь сайт состоит только из одной странички – <b>index </b>. Но ведь ваш сайт будет состоять не из одной страницы, правильно? Тогда давайте займемся созданием остальных страниц.</p> <p>Подразумевается, что у вас в голове уже должен быть образ примерного содержания остальных страниц вашего сайта. Если его у вас еще нет, советую вам этот образ в голове соорудить, так как в <a href="/browsing-the-internet/funkciya-sohraneniya-dokumenta-v-programme-1s-buhgalteriya.html">дальнейшей работе</a> он очень поможет.</p> <p>Вообще, у вас же есть названия разделов и подразделов? Логично начать с их создания.</p> <p>Сначала откройте страницу index в Dreamweaver. Теперь сохраните ее, выполнив команду <b>File (Файл) | Save as (Сохранить как) </b>, но уже под другим именем. Предположим, вторая страница у вас будет называться <b>states </b> (статьи). Вот и сохраните страницу index под именем states.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_1.jpg' align="center" width="100%" loading=lazy></p> <p>Теперь у вас есть две идентичные страницы-близнецы, имеющие разные имена. Но зачем вам на сайте две совершенно одинаковые страницы, пусть и под разными именами? Думаю, совершенно ни к чему.</p> <p>Поэтому, не закрывая Dreamweaver, внесите изменения в вашу новую страницу, которую я по умолчанию буду называть <b>states </b>. Вставьте все картинки, напишите текст… Воплощайте в жизнь свои представления об этой странице. Конечно, сначала там может быть всего пара абзацев, но это же только первый вариант?</p> <p>Готово? Тогда заходим в <b>Page Properties </b>. Помните еще, как это делается? Команда меню <b>Modify (Изменить) | Page Properties (Свойства страницы) </b>или сочетание клавиш <Ctrl>+<J>. Далее в левом списке <b>Category (Категория) </b> выбираем пункт <b>Title/Encoding (Заголовок/Кодировка) </b>.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_2.jpg' align="center" width="100%" loading=lazy></p> <p>Рядом с надписью <b>Title (Заголовок) </b>пишите заголовок вашей страницы. В данном случае «Статьи». Можно также написать «название вашего сайта > статьи» или наоборот, «статьи > название вашего сайта».</p> <p>Кстати, а для <a href="/social-network/semanticheskoe-yadro-dlya-glavnoi-stranicy-semanticheskoe-yadro-kak.html">главной страницы</a> у вас прописан заголовок? Вообще, что такое заголовок? Это то, что отображается в самом верху окна вашего браузера при просмотре страницы.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_3.jpg' height="37" width="191" loading=lazy></p> <p>Вот и все, вторая страница создана. Перед тем, как перейти к созданию всех прочих страниц, я расскажу, как соединить две уже созданные страницы (index и states) гиперссылками.</p> <p>Являясь пользователем Интернета, вы, безусловно, не раз сталкивались со ссылками. Весь Интернет состоит из них! Сложно представить его существование без ссылок, которые находятся практически на каждой странице.</p> <p>Вашим посетителям тоже нужно будет как-то перейти из одного раздела в другой. И как это сделаешь без ссылок?</p> <p>Теперь можно выполнить команду меню <b>Modify (Изменить) | Make Link (Создать ссылку) </b> (откроется диалоговое окно) или обратиться к нашей любимой панели Properties.<br> Если вы выбрали второй вариант, то обратите внимание на поле <b>Link (Ссылка) </b>. Справа находим кнопку с изображение папки <b>Browse for file </b> и нажимаем на нее.</p> <p>Откроется диалоговое окно <b>Select File </b>, где нужно выбрать файл, на который будет вести ссылка.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_6.jpg' align="center" width="100%" loading=lazy></p> <p>Нажимаем ОК, сохраняем страницу и открываем ее в браузере. Проверяем, как работает ссылка. Если вы все сделали правильно, то после щелчка попадете на нужную страницу. В данном случае с главной страницы на страницу Статьи. Все так? Значит, с задачей вы справились успешно!</p> <p>Гиперссылки можно создавать и с нуля, не выделяя предварительно слово или словосочетание. Открываем вкладку <b>Common </b> панели инструментов <b>Insert </b>. Первой расположена кнопка <b>Hyperlink (Гиперссылка) </b>.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_8.jpg' height="52" width="140" loading=lazy></p> <p>Щелчок по ней открывает диалоговое окно <b>Hyperlink (Гиперссылка) </b>.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_9.jpg' align="center" width="100%" loading=lazy></p> <p>Поле <b>Link (Ссылка) </b> вам уже знакомо, здесь должен быть URL-адрес страницы, на которую делается ссылка. При нажатии на расположенную справа кнопку <b>Browse </b> с изображением папки, откроется окно <b>Select File </b>.</p> <p>Обратите внимание на поле ввода <b>Title </b>. Сюда можно ввести поясняющий текст, который будет отображаться при наведении курсора на ссылку. Это поле довольно вместительное, есть возможность ввести несколько предложений.</p> <p>Чтобы изменить адрес созданной ссылки, можно выделить ее и исправить введенное значение в поле <b>Link </b> панели <b>Properties </b>. Или выполнить команду меню <b>Modify (Изменить) | Change Link (Заменить ссылку) </b>, которая открывает окно <b>Select File </b>, в котором нужно выбрать новый файл, содержащий необходимую страницу.</p> <p>Помимо простых текстовых ссылок, в Dreamweaver также можно создать почтовую ссылку. Почтовая ссылка – это гиперссылка, которая создает переход не на другую страницу или сайт, а на указанный адрес электронной почты. Как правило, такие ссылки используются на сайтах для создания <a href="/social-network/sozdaem-formu-obratnoi-svyazi-na-html-krasivaya-forma-obratnoi-svyazi-bez-kartinok-na.html">обратной связи</a> с посетителями.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_10.jpg' height="254" width="243" loading=lazy></p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_11.jpg' height="51" width="139" loading=lazy></p> <p>Оба способа приводят к открытию диалогового окна <b>Email Link (Ссылка e-mail). </b></p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_12.jpg' align="center" width="100%" loading=lazy></p> <p>Нажимаем ОК и смотрим, что получилось.</p> <p>На странице, в том месте, где стоял текстовой курсор, появится текст, введенный в поле Text. Он будет выглядеть как обычная текстовая ссылка. Откроем страницу в браузере и нажмем на ссылку. Должно открыться стандартное окно программы электронной почты.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_13.jpg' align="center" height="499" width="461" loading=lazy></p> <p>Вот мы и закончили наш третий Web-сайт. Все работает, все страницы нормально загружаются и отображаются в Web-обозревателе. Казалось бы, нет поводов для беспокойства.</p> <p>Нет, но только до поры до времени.</p> <p>Представим себе такую ситуацию. Мы вдруг решили добавить в наш сайт новую страницу. Чтобы это сделать, нам нужно изменить полосу навигации во всех страницах, а для этого придется открыть каждую из них в окне документа, добавить ссылку и сохранить страницу. Наш сайт невелик по размеру, и мы выполним эту работу довольно быстро. А если бы он был велик?</p> <p>Конечно, мы можем воспользоваться встроенными средствами Dreamweaver. Например, вызвать диалоговое окно <b>Find and Replace </b> - средство исключительно мощное. (О возможностях по поиску и замене подстрок см. в главе 2.) Или запустить замену гиперссылок, вызвав пункт <b>Change Link Sitewide </b> меню <b>Site </b> панели <b>Site </b> (см. главу 6). Во многих случаях это поможет нам быстро заменить целые фрагменты содержимого страницы или ее HTML-кода. Большую помощь нам могут дать активы и библиотека элементов, также описанные в главе 6.</p> <p>Но что делать, если мы хотим произвести какие-нибудь значительные изменения, например, радикально поменять структуру таблицы разметки? Поиск и замена нам вряд ли помогут, а уж автоматическая замена гиперссылок - тем более. Даже активы с библиотекой нам в этом случае не помогут. Неужели придется переделывать заново все страницы?!</p> <p>Если бы вы работали не в среде Dreamweaver, вероятно, так бы и пришлось делать. Но нам повезло. Dreamweaver поддерживает такое мощное средство, как шаблоны. Они уже упоминались в главе 3. Сейчас мы их рассмотрим подробнее.</p> <p><b>Шаблон </b> - это своеобразный образец, "скелет" Web-страницы, содержащий общие для всех страниц элементы. Когда вы создаете новую страницу на основе шаблона, вам остается только вписать в нужные места уникальное содержимое этой самой страницы и сохранить ее. Впоследствии вы можете изменить шаблон - и Dreamweaver сам обновит все созданные на его основе страницы.</p> <p>В этом смысле шаблоны схожи с элементами библиотеки (см. главу 6). Отличие в том, что шаблон - это заготовка для целой страницы, а библиотека хранит только ее отдельные элементы. Однако разработчики Dreamweaver считают, что шаблоны ближе всего по "родству" активам (см. главу 6), и поместили список шаблонов в панели <b>Assets </b>.</p> <p>Изначально шаблон изменить нельзя, т. е. когда вы создаете на его основе страницу, вы можете помещать содержимое только в специально отведенных для этого местах - изменяемых областях. Элементы самого шаблона вы редактировать не можете, т. к. они являются неизменяемыми областями. Если же вы хотите что-то исправить, то вам придется открыть в окне документа сам шаблон. Таким образом, Dreamweaver спасает вас от ошибочного изменения шаблона и, соответственно, от искажения созданных на его основе Web-страниц.</p> <p>Можно сказать, что шаблоны - это обычные Web-страницы. При редактировании вы можете обращаться с шаблонами, как с обычными Web-страницами, и использовать те же инструменты. Также вы можете задавать параметры страницы, которая будет создана на основе этого шаблона (название, цвет фона, текста и гиперссылок). Однако при создании HTML-кода шаблонов Dreamweaver использует множество собственных тегов и атрибутов, поэтому говорить о том, что шаблон - обычная Web-страница, не совсем корректно.</p> <p>Шаблоны сохраняются в файлах с расширением.dwt в папке Templates, находящейся в корневой папке локальной копии сайта. Из этого следует, что шаблоны - неотъемлемая часть вашего сайта, как и библиотека. Чтобы использовать какой-либо шаблон в другом сайте, вы будете должны скопировать его в тот сайт, использовав <a href="/skype/kak-otkryt-fleshku-zashchishchennuyu-parolem-kak-zashchitit-faily-na-usb-fleshke.html">стандартные средства</a> Dreamweaver (см. главу 6). В одном сайте могут применяться несколько шаблонов.</p> <p>Шаблоны более всего пригодятся вам, если вы создаете страницы на основе табличного дизайна. Такие страницы практически всегда содержат множество повторяющихся элементов, обновлять которые вручную крайне трудоемко. Но вы можете заготовить шаблоны и для "обычных" страниц. Это может понадобиться, например, если вы создаете страницы с одинаковым оформлением для какого-то большого фирменного сайта.</p> <p>Вместе с Dreamweaver поставляется довольно много шаблонов, созданных профессиональными Web-дизайнерами. Вы можете использовать эти шаблоны для создания своих страниц; как это делается, было рассмотрено в главе 3. Попробуйте - возможно, вы найдете что-нибудь, для вас подходящее.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <span style="display:none" class="updated">2016-05-11</span> <div class="clear"></div> </div> </article> <div class="post-navigation"> <div class="post-previous"> <a href="/earnings/upravlenie-kompyuterom-bez-ruk-giroskop-mne-v-temya-s-chem-sovmestimy.html" rel="prev"><span>Предыдущий</span> Управление компьютером без рук (гироскоп мне в темя!</a> <!-- /next_post --></div> <div class="post-next"> <a href="/social-network/propadaet-signal-seti-samsung-s4-samsung-galaxy-teryaet-set-reshenie-zabudte-o.html" rel="next"><span>Следующий</span> Samsung Galaxy теряет сеть — решение</a> <!-- /next_post --></div> </div> <section id="related_posts"> <div class="block-head"> <h3>Похожие публикации</h3> <div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail"> <a href="/browsing-the-internet/kak-pereproshit-m-rtvye-telefony-nokia-s-pomoshchyu-programmy-phoenix-usb-proshivka.html"> <img width="310" height="165" src="/uploads/25e5ff20a99519fa4f02e81bc7e07009.jpg" class="attachment-tie-medium wp-post-image" alt="USB-прошивка «мертвых» телефонов Nokia через программу Phoenix Приступаем к установке программ" / loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="/browsing-the-internet/kak-pereproshit-m-rtvye-telefony-nokia-s-pomoshchyu-programmy-phoenix-usb-proshivka.html" rel="bookmark">USB-прошивка «мертвых» телефонов Nokia через программу Phoenix Приступаем к установке программ</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i>2024-04-22 02:38:29</span></p> </div> <div class="related-item"> <div class="post-thumbnail"> <a href="/facebook/kak-vybrat-ochki-virtualnoi-realnosti-chto-takoe-shlem-virtualnoi.html"> <img width="310" height="165" src="/uploads/3d65d33c928cdce65a248deb47aa6c8c.jpg" class="attachment-tie-medium wp-post-image" alt="Что такое Шлем виртуальной реальности?" / loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="/facebook/kak-vybrat-ochki-virtualnoi-realnosti-chto-takoe-shlem-virtualnoi.html" rel="bookmark">Что такое Шлем виртуальной реальности?</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i>2024-04-21 02:42:38</span></p> </div> <div class="related-item"> <div class="post-thumbnail"> <a href="/master-pc/privodyashchie-k-poyavleniyu-bsod-sinego-chto-delat-esli-sinii-ekran-smerti-windows.html"> <img width="310" height="165" src="/uploads/835ad1b63767db8ff4ec3822b65f8f03.jpg" class="attachment-tie-medium wp-post-image" alt="Что делать, если синий экран смерти Windows" / loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="/master-pc/privodyashchie-k-poyavleniyu-bsod-sinego-chto-delat-esli-sinii-ekran-smerti-windows.html" rel="bookmark">Что делать, если синий экран смерти Windows</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i>2024-04-21 02:42:38</span></p> </div> </div> </section> <script type="text/javascript"> document.getElementById('hc_full_comments').innerHTML = ''; </script> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> </div> </aside> <div class="clear"></div> </div> <div class="e3lan e3lan-bottom"> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="wide-left-3c"> </div> <div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"> </div> <div class="social-icons"> <a class="ttip-none" title="Google+" href="" target="_blank"><i class="fa fa-google-plus"></i></a><a class="ttip-none" title="Twitter" href="https://www.twitter.com/share?url=https://sushiandbox.ru/social-network/ustanovka-shablona-v-dreamweaver-ustanovka-shablona-v-dreamweaver-dreamweaver.html" target="_blank"><i class="fa fa-twitter"></i></a> <a class="ttip-none" title="vk.com" href="https://vk.com/share.php?url=https://sushiandbox.ru/social-network/ustanovka-shablona-v-dreamweaver-ustanovka-shablona-v-dreamweaver-dreamweaver.html" target="_blank"><i class="fa fa-vk"></i></a> </div> <div class="alignleft"> © Copyright 2024, Осваиваем ПК - Интернет. Скайп. Социальные сети. Уроки по Windows </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Прокрутить Вверх"></div> <div id="fb-root"></div> <div id="reading-position-indicator"></div> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/CodeCanyon-Arqamv2.0.4-RetinaResponsiveWordPressSocialCounterPlugin-5085289/assets/js/scripts.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/ark-hidecommentlinks.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip_init.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "", "lightbox_all": "true", "lightbox_gallery": "true", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "", "sticky_sidebar": "1", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "true", "lang_no_results": "\u041d\u0435\u0442 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b", "lang_results_found": "\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043d\u0430\u0439\u0434\u0435\u043d\u043e" }; /* ]]> */ </script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/tie-scripts.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/ilightbox.packed.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/search.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/jquery.cycle.all.js'></script> </body> </html>