Как в программе adobe dreamweaver

Свежий программный пакет, ради которого стоит жить: Dreamweaver 3 и Fireworks 3 входят в число самых мощных в мире средств для Web-дизайна. И эта статья поможет вам научиться ими пользоваться.

Редактор Macromedia Dreamweaver в своем последнем воплощении включает больше профессиональных средств и функций, чем все его соперники вместе взятые, и при этом обладает широчайшими возможностями конфигурирования. Однако для того чтобы воспользоваться всеми его преимуществами, не нужно быть гением в области техники. Многие из этих новшеств рассчитаны на облегчение работы и повышение производительности труда и созданы на основе превосходных средств разработки, появившихся в предыдущих версиях. Стили HTML позволяют определять для страниц CSS-подобные форматы, работающие в любом браузере, а тесная интеграция с Fireworks 3 весьма упрощает создание графических элементов.

Эти девять страниц учебных материалов помогут вам вырваться в лидеры в этой игре, познакомив вас с методами работы с Dreamweaver 3 и Fireworks 3. Так что не медлите, переверните страницу.

Создание сайта в Adobe Dreamweaver Урок — 1

Этап 1: Создание страницы

Начнем с самых азов: создание простой страницы с анимированными кнопками в качестве шаблона для всего узла

1. Создайте на жестком диске папку с именем newsite и разместите в ней вторую папку, назвав ее images. Можно добавить и другие папки для страниц узла, клипов Shockwave, аудиофрагментов и прочих файлов, которые могут вам потребоваться позже.
2. Запустите Fireworks и загрузите заготовленный файл header.png — простой заголовок Web-страницы с логотипом, надписью и небольшой навигационной панелью. Выберите команду View>Grid Options>Edit Grid и установите шаг сетки 10×10 пикселов. Затем включите параметр Snap to Grid.
3. Выберите инструмент Slice и аккуратно выделите в изображении область логотипа, для удобства воспользовавшись сеткой. Затем с помощью того же инструмента выделите заголовок, навигационную панель и находящуюся рядом с ней надпись current charts.
4. Выберите фрагмент логотипа и найдите палитру Objects. Отключите параметр Auto-Name и введите имя logo.gif. Присвойте оставшимся фрагментам имена masterhead.gif, chart.gif и chartnav.gif, воспользовавшись разбитым на фрагменты файлом в качестве образца. В диалоговом окне File>Export выберите Use Slice Objects и сохраните изображения в папке images создаваемого узла. Кроме того, обязательно сохраните исходный PNG-файл.
5. Теперь запустите Dreamweaver 3 и выберите команду New Sites из меню Sites. В появившемся диалоговом окне найдите ранее созданную папку newsites и нажмите кнопку OK. (Остальные параметры на данный момент можно оставить без изменений.) Сохраните текущий (пустой) документ в той же папке под именем index.htm.
6. Дважды щелкните значок New Table в разделе Common Objects окна Object Inspector. Вставьте новую таблицу, состоящую из одной строки и двух столбцов, и установите для параметров Padding, Spacing и Border значение 0. После этого проверьте, активно ли окно Properties Inspector, открыв меню Windows и посмотрев, стоит ли галочка возле пункта Properties.
7. Выделите таблицу. В окне Properties Inspector установите для нее ширину 580 пикселов. Щелкните внутри первой ячейки таблицы. Установите ширину ячейки 100 пикселов, высоту 160 пикселов, а выравнивание содержимого — Left, Top. Дважды щелкните значок Insert Image в окне Object Inspector и найдите ранее экспортированное изображение logo.gif. Нажав кнопку OK, добавьте его к странице.
8. Теперь щелкните на второй ячейке и выберите команду Modify>Table, затем установите параметр Rows и введите значение 2 в соответствующем поле. Щелкните внутри новой верхней строки и с помощью окна Properties Inspector установите для нее ширину 480 пикселов, а высоту — 110 пикселов. Установите для расположенной ниже ячейки ширину 480 пикселов и высоту 50 пикселов. Наконец, установите выравнивание для ячеек — Left, Top.
9. Щелкните на верхней пустой ячейке таблицы. Выберите из меню команду Insert>Image и найдите изображение masterhead.gif в папке images. Выделите расположенную ниже ячейку и поместите в нее одно за другим изображения chart.gif и chartnav.gif. Сохраните страницу.

Этап 2: Палитра History

Возврат к любому месту в процессе разработки, повтор действий и первые шаги в настройке Dreamweaver

Dreamweaver — Tutorial for Beginners in 12 MINUTES! [ COMPLETE ]

1. Если палитра History еще не открыта, выберите команду History из меню Windows. Новая палитра History в Dreamweaver похожа на аналогичную палитру в Photoshop 5 — в ней записывается каждая операция, выполняемая над файлом, что позволяет получить больший контроль над реализацией проекта.
2. Щелкните маркер положения в палитре History и удержите кнопку мыши, затем переместите его вверх. По мере продвижения операции, проведенные над документом в основном окне, последовательно отменяются, что позволяет вернуться к любому этапу создания страницы. Снова сдвиньте маркер в нижнее положение, чтобы возвратиться к окончательному состоянию страницы.
3. Операции из списка History можно повторять. Для примера попробуйте поместить курсор под созданной таблицей и выбрать команду Insert Table в списке History. Нажатие клавиш Control+Y (PC) или Option+Y (Mac) приводит к повторному выполнению последней операции.
4. Последовательность операций можно сохранить в качестве новой команды. Выберите палитру History и щелкните на верхней операции, затем, удерживая клавишу Shift, щелкните на последней операции в списке, чтобы выбрать их все. Щелкните на значке Save в палитре History, чтобы сохранить эти действия в качестве команды.
5. В появившемся диалоговом окне присвойте команде имя Insert MPFree Header. Перейдите к меню File и выберите команду New, чтобы создать новый файл. Щелкните на странице, чтобы активизировать ее, и выберите созданную команду из меню Commands, чтобы воспроизвести этот процесс. Результатом этого станет размещение заголовка в новом документе.
6. Тесная интеграция Dreamweaver 3 с Fireworks позволяет создавать весьма сложные команды, вызывающие сценарии Fireworks. Кроме того, в комплект программы входят готовые команды, позволяющие быстро оптимизировать изображения и создавать страницы на основе шаблонов, требуя ввода небольшого количества данных.
7. Возможности настройки Dreamweaver 3 гораздо шире, чем в предыдущих версиях программы. Выберите команду File>Open и найдите папку configurationmenus в программной папке Dreamweaver. Здесь можно увидеть, что вся система меню написана на XML и поддается модификации, хотя для их редактирования необходимо знакомство с XML и JavaScript.
8. Другие фрагменты Dreamweaver 3 тоже могут редактироваться. Выберите File>Open и перейдите в папку configurationobjectscommon в программной папке Dreamweaver. Выберите Web-документ table.htm. Dreamweaver отобразит предназначенное для вставки таблиц диалоговое окно, которое можно отредактировать.
9. Измените устанавливаемые по умолчанию параметры для количества строк и столбцов и сохраните файл. Удерживая клавишу Control/Alt, щелкните в поле Title в окне Object и выберите команду Reload Actions. При следующей вставке таблицы будут использоваться новые параметры. Большинство объектов и операций в Dreamweaver можно редактировать подобным образом, непосредственно изменяя исходный код.

Этап 3: Карты ссылок

Быстрое добавление встроенных карт ссылок к изображениям

1. Вернемся к нашей работе. Новая функция Inline Image Maps значительно улучшена по сравнению с предыдущими версиями. Все нужные средства теперь находятся в окне Properties Inspector для изображений, а не в отдельном диалоге. Вернитесь к файлу index1ext1l и начните работу, щелкнув на изображении chartnav.gif.
2. Введите название карты chartmap в текстовом поле Map. Затем щелкните на инструменте Rectangular Hotspot и с помощью мыши нарисуйте прямоугольник вокруг кнопки 1. В поле Link введите none.html — это имя файла, который вы ранее перетащили в корневой каталог узла.
3. Повторите эту процедуру для каждой кнопки по очереди, связав их с файлом none.html. В «настоящем» узле ссылки указывали бы на другие страницы. Кроме того, можно воспользоваться кнопкой с изображением папки для поиска файлов или значком ссылки для выбора ссылки из окна Site.

Этап 4: Настройка HTML-кода

Использование стилей HTML и функции Quick Tags для управления внешним видом и форматированием документов

1. Пусть файл example1ext1l содержит почти законченную версию создаваемой нами страницы. Выберите Windows>HTML Styles, затем щелкните на стрелке в верхнем левом углу окна, чтобы открыть его выпадающее меню. Выберите команду New.
2. Присвойте новому стилю HTML имя Main Heading, выберите Arial, Helvetica, sans-serif из выпадающего списка Font и установите размер 6. Щелкните на значках полужирного шрифта и курсива, а затем нажмите кнопку OK.
3. Выделите фрагмент текста и выберите только что созданный стиль HTML из списка, чтобы применить его. Создайте дополнительные стили для основного текста и подзаголовков. Стили HTML будут работать в любом браузере, поскольку в них используется тэг , а не каскадные таблицы стилей.
4. Иногда возникает необходимость работать с HTML-кодом страницы напрямую, не полагаясь на визуальные средства Dreamweaver. Функция Quick Tags в Dreamweaver 3 обеспечивает доступ и контекстное редактирование кода страницы.
5. Перетащите значок Insert Horizontal Rule в нижнюю часть страницы. С помощью окна Properties Inspector установите для нее ширину 580 пикселов, высоту 10 пикселов и выравнивание влево. Если флажок Shading установлен, снимите его. Выбрав линию, нажмите клавиши Control/Option+T, чтобы вызвать редактор Quick Tags.
6. Щелкните после последнего параметра, чтобы установить курсор, затем выберите COLOR из появившегося выпадающего списка. Допишите тэг линии так, чтобы он включал параметр COLOR=”#33666″. Этот атрибут распознается только браузером Internet Explorer и не поддерживается Dreamweaver напрямую.

Этап 5: Fireworks и объекты

Интеграция Dreamweaver 3 с Fireworks 3 и использование новых объектов для автоматизации задач

1. Снова запустите Fireworks и создайте документ размером 60×60 пикселов. Нарисуйте заполненный круг и примените к нему эффект вдавленности из палитры Effects. Нанесите на полученную кнопку надпись.
2. Выберите команду Duplicate Frame из выпадающего списка в палитре Frames. Перейдите к новому кадру с помощью стрелок в нижней части окна документа и измените цвет надписи. Вернитесь к кадру 1 и нажмите клавиши Control/Option+A, чтобы выделить все.
3. Выберите команду Insert>New Button. Введите none.html в поле Links в палитре HTML или выберите этот файл с помощью функции обзора. Сохраните графический файл под именем button.png в новой папке rollovers в своем узле.
4. Выберите команду File>Export. В диалоговом окне Save присвойте кнопке имя button1.gif и выберите Use Slice Objects. В разделе HTML Settings выберите Dreamweaver 3 и оставьте в поле Location значение Same Directory. Сохраните файлы в папке rollovers.
5. Вернитесь в Dreamweaver, поместите курсор на боковую панель в файле example.html и дважды щелкните на значке Insert Fireworks HTML в окне Object. Перейдите в каталог rollovers и выберите там HTML-файл, который должен называться button1.html.
6. Воспользуйтесь файлом button.png в качестве шаблона для создания остальных кнопок и тем же способом добавьте их к странице. Кнопки можно создать и с «нуля», выбрав документ с единственным кадром, вызвав команду Insert>New Button и добавив дополнительные изображения в появившемся диалоговом окне.
7. Dreamweaver 3 включает и другие новые объекты. Чтобы испытать один из наиболее привлекательных, перетащите значок Email из окна Object Inspector на боковую панель. В появившемся диалоговом окне введите нужный текст для ссылки и соответствующий адрес электронной почты. Включение данного нового объекта означает, что все средства для работы с гиперссылками в Dreamweaver теперь автоматизированы.
8. Обратите внимание и на новые объекты для Flash 4 и Generator 2, которые поддерживают все необходимые параметры и позволяют непосредственно редактировать их. До этого лучшим средством для размещения таких файлов на страницах был AfterShock.
9. Объект Character — еще одно превосходное нововведение. Как и все остальные объекты палитр, его можно редактировать. Для того чтобы добавить новый символ, необходимо создать в Dreamweaver файл HTML и вставить в него нужный символ с помощью обычного сочетания клавиш, а затем создать значок в GIF-файле с тем же именем и поместить оба файла в папку configurationobjectscharacters.

Этап 6: Оптимизация и шаблоны

Окончательные действия по оптимизации графики, сжатию, проверке кода и сохранению страницы в качестве шаблона

1. После создания основного формата, добавления кода и вставки объектов необходимо оптимизировать и привести страницу в законченный вид, прежде чем считать ее готовой. На бумаге дизайн мог выглядеть отлично, однако вид и работоспособность созданной страницы необходимо проверить, прежде чем отправлять ее в Интернет.
2. Одно из преимуществ создания основных изображений в качестве фрагментов Fireworks — это то, что страницу можно отредактировать в любой момент. Чтобы исправить отдельное изображение, его нужно выделить в Dreamweaver, выбрать в окне Properties Inspector команду Edit для запуска Fireworks и внести необходимые исправления. Документы в Dreamweaver будут обновлены автоматически.
3. Если исходный графический файл Fireworks был сохранен в формате PNG, изменения можно вносить и в него. Загрузите этот файл в Fireworks, отредактируйте его, а затем заново экспортируйте изображения в папку images. Никаких действий над самой страницей при этом производить не требуется.
4. Другие присутствующие на странице изображения, в частности те, которые были созданы без использования Fireworks, на этом этапе можно оптимизировать. По очереди выделяйте изображения и выбирайте в Fireworks команду Modify>Optimise Image. При этом в память будет загружен механизм экспорта Fireworks.
5. Завершив работу над страницей, выберите команду Commands>Clean-up HTML. Из-за того что в документ включались стили шрифтов и фрагменты кода из Fireworks, системе очистки кода Dreamweaver найдется, над чем поработать.
6. На этом этапе полезно будет взглянуть на код! Поскольку мы трудились над одной-единственной страницей, это не займет много времени. Убедитесь, что все внутренние ссылки являются относительными. Иногда в файл попадают абсолютные ссылки (содержащие полный путь к файлу на локальном жестком диске). Они не будут работать, поэтому их следует исправить вручную.
7. Теперь, когда у нас есть вполне симпатичная и работоспособная страница, пора сделать ее образцом для всего узла, превратив в шаблон. Выберите команду File>Save As Template и введите имя default в появившемся диалоговом окне.
8. Выделите первую ячейку с текстом в файле example.html и выберите команду Modify>Templates>New Editable Region из основного меню. Присвойте региону имя cell1. Повторите эти действия для второй ячейки, присвоив ей имя cell2. Сохраните файл.
9. Перейдите к меню File и выберите команду New From Template. Выберите из списка default. На экране появится страница, полностью включающая все элементы дизайна, но содержащая две области для новой информации. С помощью таких заранее подготовленных страниц можно быстро создать узел, а при редактировании шаблона изменения будут отражены на всех страницах узла.

Этап 7: Анимация с помощью Timeline

Хороший способ создания рекламных баннеров для узла

1. Некоторые компании выпускают специальные программы для создания анимационных рекламных баннеров, сменяющих друг друга. Мы же воспользуемся средствами Dreamweaver 3, чтобы создать DHTML-совместимый баннер, который будет работать в современном браузере без дополнительных модулей и серверных сценариев.
2. Создайте новый документ, затем выберите инструмент Layers из палитры Objects и нарисуйте на пустой странице новый слой. Выберите команду Window>Layers. В окне появится новый слой с именем Layer1. С помощью окна Properties Inspector установите размер слоя 480×60 пикселов.
3. Под первым слоем создайте второй, тоже установив для него размер 480×60 пикселов. Таким же образом создайте и третий слой, идентичный первым двум. Теперь в окне Layers Inspector должны отображаться три слоя с именами Layer1, Layer2 и Layer3, имеющие одинаковые размеры.
4. Нарисуйте в Fireworks три рекламных баннера и экспортируйте их в файлы формата GIF или просто загрузите какие-нибудь баннеры из Интернета. Вернитесь в Dreamweaver, выберите в окне Layers слой Layer1, затем щелкните внутри него, чтобы сделать курсор активным. Вызовите команду Insert>Image и укажите первый баннер. Тем же способом вставьте остальные два баннера в слои Layer2 и Layer3.
5. Выберите в окне Layers слой Layer1. В окне Properties Inspector установите для полей L (Left) и T (Top) значение 10 пикселов. Таким же образом установите положение для оставшихся двух слоев, чтобы все они находились непосредственно друг над другом. При просмотре в браузере изображения должны выводиться поочередно. Этого можно добиться, скрывая и отображая слои с помощью функции Timeline.
6. Выберите команду Window>Timeline и щелкните на первом кадре в первой строке. Выделите слой Layer1 в окне Layers и выберите команду Modify>Timelines>Add Object to Timeline. Щелкните на последнем кадре только что добавленного объекта в окне Timeline и перетащите его так, чтобы полоса занимала диапазон от 1-го до 30-го кадра.
7. Повторите описанные в предыдущем пункте действия для слоев Layer2 и Layer3, чтобы создать для каждого слоя в окне Timeline отдельную полосу. Щелкните на кадре 10 в строке Layer1 окна Timeline и создайте ключевой кадр, выбрав команду Modify>Timeline>Add Keyframe. Тем же способом добавьте дополнительные ключевые кадры на 10-м и 20-м кадрах в строке Layer2 и на 20-м кадре в строке Layer3.
8. Выберите первый кадр, щелкнув на соответствующей позиции линейки окна Timeline. Выберите в окне Layers слой Layer1 и включите отображение этого слоя с помощью пункта Vis. Щелкните на кадре 10 на линейке окна Timeline и с помощью окна свойств выключите отображение слоя Layer1 и включите отображение слоя Layer2. Щелкните на кадре 20. Выключите отображение слоя Layer2 и включите отображение слоя Layer3.
9. Оставаясь в позиции 30-го кадра, выберите команду Modify>Timeline>Add Behaviour to Timeline. Щелкните значок «+» и выберите команду Timeline>Go To Timeline Frame, а затем пункт Go To Frame 1 в появившемся диалоговом окне. Щелкните вкладку, чтобы вернуться к окну Timeline, установите для параметра fps значение 3 и включите флажок Autoplay. Сохраните страницу, выберите команду Preview in Browser и любуйтесь результатами тяжелого труда.

Источник: compuart.ru

Создание сайта на Adobe Dreamweaver

В этой главе мы познакомимся с замечательной программой, с помощью которой создают сайты — Adobe Dreamweaver. Это интуитивно понятный визуально ориентированный HTML-редактор. Мы уже знаем начальные элементы, из которых состоит веб-ресурс. С помощью Dreamweaver мы сможем делать сайты сложнее, лучше и быстрее, чем, если бы мы писали руками в блокноте. Для начала давайте познакомимся с основными управляющими элементами редактора.

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

В открывшемся окне нам редактор предлагает несколько вариантов создания сайта. Начнем с самого простого:

1. Нажмите на ссылку Site (обозначена цифрой 1). В открывшемся окне выберите New Site.

1. Мы увидим такое окно:

Перейдите на вкладку Advanced, в категорию Local Info. В поле Site name введите название сайта, в поле Local root folder введите путь к папке, где будут хранится файлы вашего ресурса. Дальше, нажмите кнопку ОК.

1. После этого вы снова попадете в окно как на рис. 1. Справа во вкладке Files будут отображаться файлы вашего сайта (обозначено цифрой 3).
2. Сейчас нажмите на ссылку HTML (цифра 2) для создания первого файла веб-проекта.
3. После этого вам откроется следующее окно:

Цифрой 1 обозначено место, где будет название нашего файла, цифрой 2 место, куда мы можем вписать название нашей страницы, которая будет отображаться в браузере, цифрой 3 обозначено место, где мы сможем выбрать, как будет отображаться наш сайт в редакторе.

Пощелкайте по области 3, вы увидите что редактор отображает нашу страницу по-разному. Если мы нажмем на кнопку Code, редактор отобразит только код нашей страницы, если мы нажмем на Design, то редактор покажет нам, как бы выглядел сайт в браузере. На рисунке 3 нажата кнопка Split, в этом режиме редактор показывает нам сверху страницу в режиме код, а снизу страницу в режиме дизайна.

В самом низу находится панель форматирования, в ней мы можем форматировать текст как в Word.

По умолчанию редактор добавляет вместо тега следующие строки кода:

Оставим эти строки как есть.

В поле Title (цифра 2) введите название нашей страницы- First Site.

Щелкните правой кнопкой мышки по названию файла (цифра 1), выберите Save As, введите имя файла — index.html и нажмите Сохранить.

С правой стороны, во вкладке Files вы увидите свой файл index.html.

По умолчанию главной страницей веб-ресурса должен быть файл с названием index.html.

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

В следующей главе мы научимся вставлять и форматировать текст нашего сайта с помощью Dreamweaver.

Источник: poisk-v-seti.ru

HTML-редактор Dreamweaver — Настройка программы

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

Dreamweaver (Дримвивер) — специализированный визуальный HTML-редактор от компании Adobe . Изначально и до 8-й версии (до 2005 года) программа разрабатывалась и поддерживалась компанией Macromedia . Начиная с 9-ой версии 2007 года (она же версия CS3) программу выпускает компания Adobe .

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

Adobe Dreamweaver является одним из популярных HTML-редакторов в мире. И случайности в этом быть не может. К тому же имя компании «Adobe» о чем-то должно говорить. Существует даже всемирное сообщество пользователей Dreamweaver .

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

Итак, Adobe Dreamweaver это визуальный HTML-редактор, в котором html-документ создается в визуальном режиме , то есть можно редактировать код и одновременно с этим видеть результат. При желании есть возможность мгновенно перейти к просмотру редактируемых страниц в браузере.

В среде разработки и дизайна Adobe Dreamweaver доступны большинство популярных передовых средств веб-разработки . Такие как HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, Adobe ColdFusion и ASP.

Поэтому, если Вы уже знакомы с HTML и CSS, и хотите быстро создавать сайты, то пора переходить к работе в специализированном HTML-редакторе Dreamweaver .

Установка программы – Общие сведения

Установить Dreamweaver очень просто . Это под силу каждому и с установкой программы никаких проблем возникнуть не должно.

Перед тем как приступать к работе с редактором Adobe Dreamweaver , его необходимо настроить. Далее рассмотрим, что нужно для этого сделать.

Для примера будем работать с 12-ой версией программы CS6 от 21 Апреля 2012. В этой версии редактора уже реализована поддержка HTML5 .

Указываем тип документа

При настройке редактора Adobe Dreamweaver в первую очередь необходимо указать тип документа, который будет использоваться по умолчанию при создании страниц.

Для этого в строке главного меню программы Adobe Dreamweaver нужно выбрать вкладку Правка и далее в раскрывающемся списке выбрать пункт Настройки . Либо перейти в настройки программы при помощи сочетания клавиш CTRL+U .

При этом появится окно, в котором пользователь сразу же оказывается в категории Создать документ . Здесь нужно проследить, чтобы в поле Документ по умолчанию было выбрано значение HTML , и тогда в следующем поле появится расширение *.html .

Далее в поле Тип документа по умолчанию (DTD) следует выбрать синтаксис соответствующего языка. В основном это HTML версии 5 .

В поле Кодировка по умолчанию выбирается используемая кодировка. Как правило, это Юникод(UTF-8) .

Таким образом, по умолчанию в редакторе Dreamweaver будет создаваться html- или php-документ , со следующим исходным кодом:

Фрагмент кода

Корневой каталог сайта

Перед тем, как перейти к разговору о главной функции программы Adobe Dreamweaver, следует понимать, что такое корневой каталог сайта и где он располагается.

Дело в том, что все файлы любого сайта: это файл главной страницы index.html или index.php , файл со стилями style.css, папка с php блоками, служебные файлы robots.txt и sitemap.xml, папка с изображениями img и другие, все они, так или иначе, расположены в одной папке. Эта папка называется корневым каталогом сайта.

Как правило, имя корневого каталога (корневой папки) совпадает с доменным именем будущего или уже существующего сайта. Это просто удобно.

Например, корневая папка этого сайта называется webpupil , то есть, так же как и доменное имя.

Так вот, корневая папка сайта, содержащая все его файлы и подкаталоги, размещается в специальном каталоге локального сервера. Если разработчик работает с сервером Denver , то это папка z:/home .

При этом полный путь к корневому каталогу сайта будет следующий:

Так устроен и работает локальный сервер Denver : окончательным корневым каталогом любого сайта, с которым проводится работа на локальном сервере Denver , является папка www .

Главная функция программы

Для работы с сайтами в программе Adobe Dreamweaver необходимо освоить главную функцию программы Управление web-сайтами. Эту функцию можно еще назвать функцией «Определения сайта»

Что это за функция и как с ней работать?

Итак, допустим, главная папка сайта уже расположена в нужном каталоге локального сервера и уже содержит несколько файлов и подкаталогов. Хотя, последнее не обязательно, сайт может быть пустым.

Теперь для работы с этим сайтом в программе Adobe Dreamweaver , необходимо его определить , то есть следует указать редактору на новый сайт, а точнее путь к его корневой папке.

Для этого делаем следующее : в правой служебной колонке программы нужно перейти на вкладку Файлы и из ниспадающего меню выбрать пункт Управление web-сайтами .

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

После этого в окне «Настройка сайта для. » нужно указать Имя веб-сайта и затем путь к его корневому каталогу в поле Локальная папка сайта . Эти два поля обязательны для заполнения .

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

Нажимаем кнопку Сохранить , затем Готово и на этом всё.

Имя вновь созданного сайта можно будет видеть справа во вкладке Файлы в ниспадающем меню выбора сайтов.

Этих настроек программы Dreamweaver как правило достаточно, чтобы начать с ней работать.

Источник: www.webpupil.ru