Сервисная поддержка

Сервисная поддержка сайта – это реакция на действия пользователей и работу сервисов

27. Общие сведения о программе Adobe Dreamweaver CS3.

Adobe Dreamweaver CS3 (правопреемник Macromedia Dreamweaver) - html редактор, занимающий лидирующие позиции в своей нише. Огромный выбор всевозможных инструментов, удобный интерфейс, тонкие настройки, позволяющие подогнать программу под нужды веб мастера - результат многолетней работы программистов компании Macromedia, а в наши дни - Adobe. Редактор подходит как профессионалам в сфере верстки и разработки сайтов, так и новичкам, во многом благодаря возможностям визуального редактора (WYSIWYG). Начинающий пользователь может создавать страницы практически без знания html - добавляя элементы страницы и указывая их параметры с помощью встроенного мастера. На примере создания таблицы с помощью мастера видно, что работать с редактором просто даже новичку.

Панели инструментов программы Dreamweaver значительно упрощают многие операции по созданию web-страниц: вставка элементов страниц, например, таблиц и рисунков: выполнение операций по добавлению или получению файлов; переключение режимов, например, как при переключении из вида Design (Дизайн) в вид Code (Код). В программе есть четыре отдельные панели инструментов: • Document (Документ) — содержит три элемента управления для переключения между видами (Design (Дизайн), Code (Код) и Split (Разделение)), поле заглавия страницы и другие параметры страницы. • Insert (Вставка) — позволяет вставлять различные элементы на web-страницу. Панель Insert (Вставка) разделена на семь категорий. • Standard (Стандартная) — поддерживает основные операции для работы с файлами, например, Open (Открыть), Save (Сохранить), Undo (Отменить) и Cut/Copy/Paste (Вырезать/Скопировать/Вставить), а также специальные функции программы Dreamweaver, например. Print Code (Печатать код) и Browse in Bridge (Просмотреть в Bridge). • Style Rendering (Отображение стилей) — контролирует отображение стилей CSS в окне Document (Документ). Панель инструментов Style Rendering (Отображение стилей) облегчает, например, создание таблицы печатных стилей.

Свойства страницы(это внизу) в программе Adobe Dreamweaver CS3. Вкладка Внешний вид, далее окно Цвет фона. Выбираете любой цвет. 2 пути выбора фона.

Первый путь - создать фон полностью в программе Adobe Photoshop CS3.

Второй путь - использовать в качестве исходного материала фотографии, при помощи той же программы и программы FastStone Image Viewer.

28.

Чтобы получить представление о файле, с которым вы будете работать в первой части этого урока, просмотрите готовую страницу в браузере. 1. Запустите программу Adobe Dreamweaver CS3. 2. Если необходимо, нажмите клавишу F8, чтобы открыть панель Files (Файлы), и выберите в списке сайтов DW CIB. 3. На панели Files (Панели) откройте папку урока Iesson04. 4. Выберите файл spirit_final.htm и нажмите клавишу F12(рис. 1).

5. Просмотрите страницу в окне браузера. Обратите внимание на разнообразие используемых текстовых элементов. На странице присутствуют заголовки, абзацы, списки и таблицы. 6. Закройте браузер и вернитесь в окно программы Dreamweaver. Ввод заголовков и основного текста Когда бы вы ни открыли программу Dreamweaver, вы имеете возможность вводить и редактировать текст. В программе Dreamweaver очень легко подобрать необходимый размер шрифта заголовка и отредактировать текст. 1. На панели Files (Файлы) дважды щелкните на файле spirit.htm, находящемся в папке Iesson04, чтобы открыть его (рис. 2).

Файл spirit.htm представляет собой незавершенную web-страницу, объединяющую в себе как окончательный текст, так и места для помещения различных объектов. 2. Выделите фразу под главной навигационной панелью, Placeholder heading (Место для заголовка), и нажмите клавишу Delete. Введите фразу Driven by imagination (Вдохновляемые воображением). По умолчанию текст вводится неформатированным. Вы можете легко применить основное форматирование, например, теги <h1>, <h2> или <p>, к любому текстовому элементу, используя панель Properties (Свойства). 3. Если необходимо, выберите в меню команду Window - Properties (Окно - Свойства), чтобы отобразить панель Properties (Свойства). Не убирая указатель мыши с только что введенного текста, выберите Heading 1 (Заголовок 1) в списке Format (Формат). Так как к этой web-странице уже подключена внешняя таблица стилей, текст наследует цвет, шрифт и размер шрифта соответствующего правила CSS. Все эти свойства отображаются в панели Properties (Свойства). Кроме списка Format (Формат), вы также можете использовать клавиатурные комбинации для основного форматирования текста. Нажмите клавиши Ctrl+1, чтобы выбрать формат <h1>, Ctrl+2, чтобы выбрать формат <h2>, и так далее до формата <h6>. Для форматирования абзаца используйте клавиатурную комбинацию Ctrl+0. 4. Установите указатель мыши над заголовком Ahead of the curve (Впереди всех) и введите фразу Our reality is visionary (Наша реальность фантастична). На панели свойств Properties (Свойства) выберите Heading 2 (Заголовок 2) в списке форматов Format (Формат). 5. Убедитесь, что указатель мыши все еще находится в конце только введенной фразы, и нажмите клавишу Enter. Введите следующий текст: We strive to move beyond the ordinary, every day For us, the extraordinary is standard in whatever we do. Communicate your dreams to us and we'll bring them to life, more vivid than you ever thought possible (Мы каждый день прилагаем все усилия, чтобы выйти за рамки обычного. Для нас исключительность является стандартом во всем, что мы делаем. Расскажите нам о ваших мечтах, и мы превратим их в реальность — настолько яркую, насколько это возможно). Возможно, вы заметили, что программа Dreamweaver автоматически добавила тег <р> после тега <h2>. Такое поведение программы обусловлено структурой web-страницы и задается настройками диалога Preferences (Предпочтения). Если вы хотите вставить копию тега заголовка вместо абзаца, выберите в меню команду Edit - Preferences (Редактирование - Предпочтения). В категории General (Общие) сбросьте флажок в поле Switch to plain paragraph after heading (Вставить обычный абзац после заголовка). Как только вы ввели текст, вы можете редактировать его так же, как и в любом другом мощном текстовом редакторе. 6. Выделите второе предложение нового абзаца: For us, the extraordinary is standard in whatever we do (Для нас исключительность является стандартом во всем, что мы делаем). Убедитесь, что не забыли включить пробел после точки. Перетащите предложение в конец абзаца и вставьте его после фразы ...ever thought possible (... насколько это возможно). Нажмите , чтобы переместить указатель в начало переставленного предложения, и нажмите клавишу Пробел. До сих пор вы работали с одним тегом, <h1>, <h2> или <p>. Если вы разделите абзац на две части, программа Dreamweaver автоматически создаст дополнительный тег.

7. Установите указатель где-либо в абзаце под заголовком Ahead of the curve (Впереди всех) перед вторым предложением, которое начинается со слов However, the dev/design crew (Однако команда разработчиков и дизайнеров), и нажмите клавишу Enter. 8. Выберите в меню команду File - Save (Файл - Сохранить). Стандартные инструменты для редактирования текста, такие как вырезание, копирование и вставка, доступны в меню Edit (Редактирование) программы Dreamweaver.  Чтобы разделить текст в пределах одного тега на две строки, нажмите клавиши Shift+Enter. Эта клавиатурная комбинация вставляет символ разрыва строки, или тег <br>. Если вы клавиатурным комбинациям предпочитаете меню, выберите команду Insert – HTML- Special Characters - Line Break (Вставка - HTML - Специальные символы - Разрыв строки). Импорт внешнего текста Несмотря на то, что программа Dreamweaver поддерживает работу с текстом, дизайнерам часто приходится использовать текст, созданный во внешних приложениях, таких как Microsoft Word. Программа Dreamweaver поддерживает различные способы вставки текста из внешних источников, включая копирование и вставку, перетаскивание, а также подключение. В данном упражнении вы вставите документ, созданный в программе Word, перетащив и вставив его с помощью мыши на страницу, а затем выбрав соответствующий параметр. 1. Если необходимо, снова откройте файл spirit.htm, с которым вы работали в предыдущем упражнении, дважды щелкнув на значке файла на панели Files (Файлы). 2. Выделите текст Placeholder paragraph (Место для абзаца) в колонке с правой стороны и нажмите клавишу Delete Вставленный текст добавится в начало колонки с правой стороны. 3. На панели Files (Файлы) откройте папку Iesson04/assets(рис. 3).

4. Перетащите файл Spirit_text.doc с панели Files (Файлы) на web-страницу и вставьте на текущую позицию курсора. При перетаскивании файла программа Dreamweaver распознает его как документ Word и открывает диалог Insert Document (Вставка документа). Этот диалог содержит различные параметры вставки, от простого текста до текста с полным сохранением форматирования, а также опцию для вставки ссылки на внешний документ.  Описанный выше шаг относится только к операционной системе Windows. Пользователи системы Macintosh должны открыть документ в программе Word и скопировать все его содержимое в буфер обмена. Затем в программе Dreamweaver выберите команду меню Edit - Paste Special (Редактирование - Специальная вставка) и установите переключатель в положение Text with structure plus basic formatting (bold, italic) (Структурированный текст с основным форматированием (полужирный, курсив)). 5. В диалоге Insert Document (Вставка документа) установите переключатели в положение Insert the contents (Вставка содержимого) и Text with structure plus basic formatting (bold, italic) (Структурированный текст с основным форматированием (полужирный, курсив)). Щелкните на кнопке ОК (рис. 4).

Мы выбрали параметр Text with structure plus basic formatting (bold, italic) (Структурированный текст с основным форматированием (полужирный, курсив)), так как текущая web-страница уже содержит стили. Если бы переключатель был установлен в положение Text with structure plus full formatting (Структурированный текст с полным форматированием), то стили программы Word были бы также включены и их следовало бы удалить. 6. Выберите в меню команду File - Save (Файл - Сохранить).  Программа Dreamweaver сохраняет разбиение на абзацы, а также курсивное написание фразы esprit de corps. Если вы установите указатель где-либо в этой фразе, вы заметите, что селектор тегов отображает, что используется соответствующий тег HTML <em>, от emphasis (Выделительный шрифт). При вставке документа из внешнего приложения программа Dreamweaver автоматически преобразует курсив в теги <em>, а полужирный шрифт в теги <strong>. Возможно, вы заметите некоторое количество орфографических ошибок во вставленном тексте. Эти ошибки были намеренно включены в текст; вы исправите их позже в этом уроке.

Поиск и замена текста Поиск и замена текста является одной из наиболее мощных функций программы Dreamweaver. Дизайнер имеет возможность найти и заменить любой по объему отрывок текста из выделенного в текущем документе на всем сайте. Вы можете искать видимый текст на странице, теги, либо и то, и другое вместе. Опытные пользователи могут использовать мощные алгоритмы анализа шаблонов, называемых регулярными выражениями, для более сложных операций поиска и замены. Далее в этом упражнении вы найдете и замените одну фразу в текущем документе в качестве знакомства с функцией поиска и замены. 1. Если необходимо, снова откройте файл spirit.htm, с которым вы работали в предыдущем упражнении, дважды щелкнув на его значке на панели Files (Файлы). 2. Выберите в меню команду Edit - Find and Replace (Редактирование - Найти и заменить). В открывшемся диалоге Find and Replace (Найти и заменить) в списке Find in (Найти) выберите Current Document (Текущий документ), а в списке Search (Искать) выберите Text (Текст). Потратьте некоторое время, чтобы познакомится с параметрами списков Find in (Найти в) и Search (Искать). Параметры списка Find in (Найти в) задают область действия поиска: выделенный текст, текущий документ, открытые документы, заданные папки, документы, выбранные на панели Files (Файлы), или текущий сайт. Параметры списка Search (Искать) задают тип поиска: исходный код, текст в режиме Design (Дизайн), текст внутри заданного кода или определенные теги. В этом упражнении вы найдете фразу dev/design и замените ее фразой dev/design. В замененной фразе слова разделены между собой пробелами с обеих сторон косой черты, для соответствия вида фразы логотипу сайта. 3. В поле Find (Найти) введите фразу dev/design (разработка и дизайн) и щелкните на кнопке Find Next (Найти далее). Программа Dreamweaver должна найти первое совпадение в тексте. Используя команду Find Next (Найти далее), вы можете найти все совпадения в тексте и определить, нужно ли их заменить. 4. В поле Replace (Заменить) введите фразу dev/design и щелкните на кнопке Replace (Заменить) (рис. 9).

Программа Dreamweaver заменит первое совпадение с фразой и сразу же будет искать следующее совпадение. Чтобы просмотреть все совпадения сразу, щелкните на кнопке Find All (Найти все). 5. В диалоге Find and Replace (Найти и заменить) щелкните на кнопке Find All (Найти все). Когда на панели Results (Результаты) отобразятся все найденные совпадения в категории Search (Искать), щелкните на втором элементе списка, чтобы перейти к нему в тексте документа.  В отличие от большинства операций с использованием диалоговых окон, диалог Find and Replace (Найти и заменить) и сама страница одновременно доступны для редактирования. Если вы уверены в том, что программа Dreamweaver заменяет необходимую фразу, вы можете использовать команду Replace All (Заменить все), чтобы найти и заменить все совпадения в пределах заданной области действия поиска. 6. Щелкните на зеленой стрелке в левом верхнем углу панели Search (Поиск). В диалоге Find and Replace (Поиск и замена) щелкните на кнопке Replace All (Заменить все). После завершения поиска и замены программа Dreamweaver автоматически закрывает диалог. Результаты поиска отображаются в нижней части панели Results Результаты). В этом упражнении вы должны получить следующий результат: Done. 2 items found. 2 replaced in the current document (Готово. Найдено 2 элемента. Выполнено 2 замены в текущем документе).

Импорт табличных данных Кроме возможности работы с текстом из других текстовых редакторов, программа Dreamweaver также предоставляет возможность встраивать таблицы из электронных таблиц и баз данных. Для импорта в программу Dreamweaver данные необходимо предварительно сохранить в формате с разделяющими символами табуляции или разделяющими запятыми. При импорте в программу Dreamweaver данные вставляются в таблицу, к которой можно применять стили или редактировать каким-либо другим способом. 1. На панели Files (Файлы) дважды щелкните на значке файла folks_maya.htm, чтобы открыть его (рис. 16).

2. Установите указатель на правую колонку в строке под заголовком Unconventional resume (Необычный).

Расширение .csv является сокращением от comma separated values (формат с разделяющими запятыми), хотя на самом деле разделитель может быть и другим. В данном случае для разделения данных в каждой строке используется символ табуляции. 3. Выберите в меню команду File - Import - Tabular Data (Файл - Импорт - Табличных данных) Щёлкните по кнопке Browse (Обзор) В открывшемся диалоге Open (Открыть) перейдите в папку Lesson04/assets и выберите файл interview.csv Щёлкните по кнопке Open (Открыть), чтобы подтвердить выбор и закрыть диалог 4. В открывающемся списке Delimiter (Разделитель) выберите Tab (Знак табуляции). Установите переключатель Table width (Ширина таблицы) в положение Set to (Установить значение) и введите значение 100 в поле ввода, а в открывающемся списке выберите Percent (Процент). В поле ввода Border (Рамка) введите значение 0. Щелкните на кнопке ОК(рис. 17).

Программа Dreamweaver вставит на страницу таблицу с данными, готовую для редактирования. Первая колонка таблицы немного уже второй. Далее вы увеличите ширину первой колонки так, чтобы данные помещались в одной строке. 5. Установите указатель в первую ячейку вставленной таблицы, содержащую фразу Art influences (Влияние искусства). Если необходимо, выберите в меню команду Window - Properties (Окно - Свойства), чтобы открыть панель свойств Properties (Свойства). В поле ввода W (от Width — ширина) введите 35% и нажмите клавишу Tab Верхняя ячейка каждой колонки определяет ширину всей колонки. Вы можете изменить ширину колонки, перетягивая рамку колонки. Теперь вы примените стиль ко всем ячейкам колонки.  6. Установите указатель мыши в первую ячейку левой колонки и перетаскивайте мышь вниз, чтобы выделить все ячейки колонки. На панели свойств Properties (Свойства) выберите стиль interviewHeader в списке Style (Стиль). Щелкните где-либо на странице, чтобы снять выделение с колонки (рис. 18).

Стиль interviewHeader делает шрифт полужирным, выравнивает его по правому краю и располагает вверху ячейки. 7. Выберите в меню команду File - Save (Файл - Сохранить) и нажмите клавишу F12(рис. 19), чтобы просмотреть страницу в браузере, установленном в вашей системе но умолчанию. Закончив просмотр, закройте браузер и вернитесь в окно программы Dreamweaver и выберите в меню команду File - Close (Файл - Закрыть).