Создание и настройка веб-сайта

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

Настройка нового сайта

Чтобы настроить новый сайт, нужно разместить все документы программы Dreamweaver в одном месте. Настройки сайта программы Dreamweaver задаются в диалоговом окне Настройка сайта (Site Setup).

Чтобы открыть диалоговое окно Настройка сайта (Site Setup), в меню Сайт (Site) выберите Новый сайт (New Site). Откроется диалоговое окно Настройка сайта (Site Setup), изображенное на рис. 1.30

Настройка сайта для Сайт без имени 2

Веб-сайт

Серверы

Управление версиями

? Дополнительные настройки

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

Здесь нужно выбрать локальную папку и имя для сайта Dreamweaver.

Имя веб-сайта: Q

:айт без имени 21

Локальная папка сайта: | C:VJsefsTopono6a_QAV)oajmentsCanT без имени 2 е

Справка

Сохранить | | Отмена

Рис. 1.30. Настройки сайта

Категория сайта

Чтобы начать работу с сайтом программы Dreamweaver, необходимо указать категорию сайта в диалоговом окне Параметры сайта (Site Setup). В этом поле нужно задать локальную папку, в которой будут сохранены все файлы сайта. Локальная папка может находиться только на вашем компьютере.

В разделе «Категория сайта» (Site Category) можно задать следующие параметры.

• • «Название сайта» (Site Name): в текстовом поле Название сайта (Site Name) указывается название сайта, которое будет отображаться на панели Файлы (Files) и в диалоговом окне Управление сайтами (Manage Sites). Название сайта не отображается в браузере.
• • «Локальная папка сайта» (Local Site Folder): в этом поле задается имя папки на локальном диске, в которой хранятся файлы сайта, шаблоны и элементы библиотеки. Создайте папку на жестком диске или выберите ее.

Категория «Серверы» (Servers)

Можно указать категорию Серверы (Servers), в которой можно задать удаленный сервер и сервер тестирования. Указывается удаленная папка на удаленном сервере, в которой сохранены файлы веб-сайта. На панели Файлы (Files) программы Dreamweaver удаленная папка относится к удаленному сайту. При задании удаленной папки нужно выбрать метод подключения программы Dreamweaver для обновления и загрузки файлов на веб-сервер.

Категория «Контроль версий» (Version Control)

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

Категория «Дополнительные настройки» (Advansed Settings)

Можно указать такие настройки, как папка изображений по умолчанию, в которой будут сохраняться изображения для вашего сайта, тип ссылок, создаваемых программой Dreamweaver при создании ссылок на другие страницы сайта. Также можно указать адрес URL веб-сайта. Программа Dreamweaver использует адрес URL для создания ссылок, относительных к корневому адресу сайта, и для проверки ссылок при использовании функции проверки ссылок. Кроме того, можно указать другие настройки, например «Проверка ссылок с учетом регистра» (Case-sensitive Links Checking), «Разрешить кэш» (Enable Cache), «Маскировка» (Clpaking) и другие категории.

Настройка и тестирование сайта

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

Чтобы настроить тестовый сервер, в меню Сайт (Site) щелкните Управление сайтами (Manage Sites). Открывается диалоговое окно Управление сайтами (Manage Sites). Щелкните Создать (New), чтобы настроить новый сайт, или выберите существующий сайт Dreamweaver и нажмите Изменить (Edit). В диалогом окне Настройка сайта (Site Setup) выберите категорию Servers (Серверы) и выберите одно из следующих действий.

• • Нажмите кнопку Добавить новый сервер (Add New Server), чтобы добавить новый сервер.
• • Выберите существующий сервер и нажмите кнопку Изменить существующий сервер (Edit Existing Server).

Следует задать Основные (Basic) параметры.

Затем нажмите кнопку Дополнительно (Advansed). Откроется экран «Дополнительно» (Advansed).

В разделе Тестовый сервер (Testing Server) выберите модель сервера, которая будет использоваться для веб-приложения. После завершения настройки нажмите Сохранить (Save), чтобы закрыть экран Дополнительно (Advansed). Затем в категории Серверы (Servers) укажите сервер, который только что был добавлен или изменен как тестовый сервер.

Создание новой страницы

После создания локального сайта и тестового сервера можно приступить к созданию страниц. Чтобы создать новую страницу, в меню Файл (File) выберите команду Создать (New) или одновременно нажмите клавиши Ctrl+N. Откроется диалоговое окно Новый документ (New Document), как показано на рис. 1.31.

Рис. 1.31. Создание нового документа

В диалоговом окне Новый документ (New Document) доступны различные типы страниц и соответствующие макеты, используемые для каждого типа страницы, в соседнем столбце. В этом диалоговом окне также можно выбрать различные типы документов, например, простая страница, динамическая страница, страница шаблона и наборы фреймов. Язык написания страницы может быть изменен с HTML на XHTML. Для этого необходимо использовать параметр Тип документа (DocType).

Использование шаблонов

Как и в других приложениях, например, MS Word, в программе Dreamweaver CS6 можно использовать существующие шаблоны и создавать новый документ. Можно использовать диалоговое окно Новый документ (New Document), чтобы выбрать шаблон из заданных сайтов программы Dreamweaver, или использовать панель Ресурсы (Assets), чтобы создать новый документ на основе существующего шаблона.

Чтобы создать новый документ на основе шаблона, в меню Файл (File) нажмите Создать (New). В диалоговом окне Новый документ (New Document) выберите категорию Пустой шаблон (Blank Template). Затем выберите Шаблон HTML (HTML Template) в столбце Тип шаблона (Template Туре), а в столбце Макет (Layout) выберите подходящее значение.

В столбце Сайт (Site) выберите сайт программы Dreamweaver, содержащий шаблон, который будет использоваться, затем выберите шаблон в списке справа. Снимите флажок Обновлять страницу при изменении шаблона (Update Page When Template Changes), если вы не хотите, чтобы эта страница обновлялась при каждом изменении шаблона, на котором она основана. Нажмите Настройки (Preferences), если необходимо задать настройки документа по умолчанию, например тип документа, кодировку и расширение файла. Нажмите Получить дополнительное содержимое (Get More Content), чтобы вызвать приложение Dreamweaver Exchange, с помощью которого можно загрузить дополнительное содержимое для дизайна страницы. Нажмите Создать (Create) и сохраните документ.

Свойства страницы

Для каждой создаваемой веб-страницы можно задать свойства, например, фоновое изображение, цвет фона, цвет ссылок и поля. Чтобы настроить или изменить свойства страницы, откройте диалоговое окно Свойства страницы (Page Properties). Чтобы открыть диалоговое окно Свойства страницы (Page Properties), в меню Modify (Изменить) выберите функцию Свойства страницы (Page Properties). На рис. 1.32 представлено диалоговое окно Свойства страницы (Page Properties).

В диалоговом окне Свойства страницы (Page Properties) можно задавать название и размер шрифта по умолчанию, цвет фона, поля, стили ссылок и многие другие параметры дизайна страницы. Можно назначать настройки каждой новой создаваемой страницы и изменять настройки существующих страниц. Изменения настроек в диалоговом окне Свойства страницы (Page Properties) применяются ко всей странице. Далее перечислены категории, которые можно задавать, используя диалоговое окно Свойства страницы (Page Properties).

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

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

Свойства страницы

Категория

Внешний вид (CSS)

Шрифт страницы: Шрифт по умолчанию ? В I

OK I Отмена I I Применить

Рис. 1.32. Свойства страницы

• • «Ссылки (CSS)» (Links (CSS)): используя эту категорию, можно задать шрифт по умолчанию, размер шрифта и цвета ссылок, посещенных ссылок и активных ссылок CSS.
• • «Заголовки (CSS)» (Headings (CSS)): используя эту категорию, можно задать шрифт и цвет заголовков.
• • Название/кодировка (Title/Encoding): категория «Название/ кодировка» (Title/Encoding) позволяет указывать кодировку документа, специфичную для языка веб-страницы, а также какая форма нормализации юникода будет использоваться с этим типом кодировки.
• • «Изображение-образец» (Tracing Image): можно вставить файл изображения, который будет использоваться как направляющий при разработке страницы с использованием этой категории.

Просмотр карты сайта

Карта сайта - визуальное представление макета сайта. Чтобы просмотреть карту сайта, создайте веб-страницу index.html. Эта страница обычно является главной страницей веб-сайта. Страница index.html всегда находится наверху, а все связанные с ней файлы будут отображаться под ней в соответствии с заданной иерархией. Другие файлы отображаются под страницей index.html.

Предварительный просмотр веб-страницы в браузере

После создания веб-страницы необходимо проверить ее на предмет корректного отображения при просмотре посетителями сайта в различных браузерах. Для этого ее можно просмотреть в таких браузерах, как Internal Explorer или Netscape. Перед просмотром документа его следует сохранить, чтобы можно было посмотреть последние изменения. Чтобы посмотреть веб-страницу в браузере, в меню Файл (File) выберите Предварительный просмотр в браузере (Preview In Browser). Затем нужно выбрать один из перечисленных браузеров. Также можно нажать клавишу F12, чтобы посмотреть веб-страницу в основном браузере.