Dreamweaver и специальные возможности. Оптимизация рабочего пространства для проектирования страниц со специальными возможностями
дипломная работа
1.1 Интерфейс среды Dreamweaver
Мощная профессиональная среда Dreamweaver обладает всеми необходимыми средствами для генерации страниц HTML любой сложности и масштаба. Она обеспечивает режим визуального проектирования (WYSIWYG или What You See Is What You Get - "что ты видишь, то ты и получишь"), отличается очень чистой работой с исходным текстом веб-документов, обладает встроенными средствами поддержки больших сетевых проектов. Ни в одном из существующих в наше время редакторов концепция WYSIWYG не реализована полностью. Программа Dreamweaver подошла к декларируемому идеалу ближе конкурентов. Прямая работа с кодами не исключена полностью, но сведена к разумному минимуму. Программа не только обладает мощным арсеналом средств визуального проектирования, но и способна отображать веб-страницы почти как специализированные программы просмотра: Microsoft Internet Explorer или Netscape Navigator.
Macromedia Dreamweaver MX - одна из самых мощных программ, поддерживающих все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, она содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе.
Интерфейс программы по сравнению с предыдущими версиями претерпел изменения. Новый стиль заметно облегчает работу с программой. Если в предыдущих версиях программы приходилось постоянно переключаться между окнами, то теперь можно одновременно работать и с кодом, и с конечным видом сайта, что существенно облегчает работу.
При загрузке Dreamweaver появляется стартовое окно (рис.1), позволяющее выбрать тип нового создаваемого документа (HTML, ColdFusion, PHP и др.), либо создать документ по готовым образцам (CSS Style Sheets, Framesets и др.), а также открыть недавно использовавшиеся документы. Кроме этого имеются ссылки на интернет-ресурсы: сайт Dreamweaver MX Exchange, обзор программы Dreamweaver MX и справочная информация по Dreamweaver MX.
Рис.1. Стартовое окно Dreamweaver MX
Рабочая область Dreamweaver содержит следующие окна и панели:
окно документа (рис.2), позволяющее просматривать и редактировать код документа (Code), просматривать внешний вид будущего документа (Design) или одновременно код и внешний вид (Split). Также имеется возможность просмотра документа в интернет-браузере, проверки ошибок и т.д.;
Рис.2. Окно документа
Стандартное раскрывающееся меню (File, Edit, View, Insert, Modify, Text, Commands, Site, Window, Help) (рис.3);
Рис.3. Стандартное раскрывающееся меню
Панель Properties (Свойства) (рис.4), позволяющая менять и добавлять свойства выделенного фрагмента кода;
Рис.4. Панель Properties
Панель Insert (Вставка) (рис.5), включающая следующие вкладки: Common (Основные) - вставка гиперссылок, таблиц, рисунков, комментариев и т.д., а также Tag Chooser (Выбор тега); Layout (Разметка) - использование ячеек и таблиц для разметки документа перед добавлением содержимого; Forms (Формы) - добавление различных видов форм; Text (Текст) - форматирование текста и Font Tag Editor (Редактор тегов текста); HTML - добавление горизонтальной линии, элементов таблицы, фреймов, свойств head, скриптов; Application (Приложения) - работа с информационными структурами; Flash elements (элементы Flash) - добавление Flash-роликов, Favorites (Избранное) - возможность добавления на отдельную вкладку наиболее часто используемых объектов.
Рис.5. Панель Insert
Группа панелей: Design (содержит стили CSS), Code (содержит справку по тегам, объектам и функциям различных технологий), Application (содержит информацию о базах данных, компонентах и т.д.), Files (Диспетчер файлов) (Рис.6).
Рис.6. Группа панелей Design, Code, Application, Files
1. Общие сведения. PHP - это язык обработки гипертекста (HTML), используемый на стороне сервера (server side scripting language), конструкции которого вставляются в HTML-текст. Его цель - позволить максимально быстро создавать динамически генерируемые web-страницы. PHP является открытым программным продуктом, что означает его бесплатность и возможность создавать свои собственные расширения языка.
PHP является самым молодым, перспективным и быстроразвивающимся из языков программирования для Интернет, доля его использования по сравнению с другими языками быстро растет.
PHP позволяет отделить HTML-текст от выполняемой части, за счет чего можно добиться значительного снижения затрат времени на разработку проекта. Во многих случаях удается отделить программную часть проекта от разработки страниц на HTML, что облегчает работу и дизайнеру, и программисту.
2. Основные характеристики.
совместимость с различными серверами и платформами;
поддержка технологий COM, XML, Java, CORBA, WDDX, Macromedia Flash;
поддержка взаимодействия с различными сервисами посредством соответствующих протоколов (LDAP, SNMP, IMAP, NNTP, POP3, HTTP и др.);
развитая функциональность для работы с сетевыми соединениями;
наличие функций для работы с текстовыми данными любых форматов, включая XML;
поддержка свыше 20 баз данных, развитая функциональность для работы с ними;
возможность создания полноценных объектно-ориентированных приложений;
сравнительно простой синтаксис и удобство в практическом использовании;
бесплатность;
открытость кода, благодаря которой можно создавать собственные расширения языка.
3. Синтаксис. PHP-скрипты встраиваются в HTML-код с помощью открывающего тега php и закрывающего тега? >. Такого вида специальные теги позволяют переключаться между режимами HTML и PHP. Программа на РНР - это набор команд (инструкций). Обработчику программы необходимо как-то отличать одну команду от другой. Для этого используются специальные символы - разделители. В PHP инструкции разделяются так же, как и в Cи или Perl, - каждое выражение заканчивается точкой с запятой.
Закрывающий тег? > также подразумевает конец инструкции, поэтому перед ним точку с запятой не ставят.
Часто при написании программ возникает необходимость делать какие-либо комментарии к коду, которые никак не влияют на сам код, а только поясняют его. PHP поддерживает несколько видов комментариев: в стиле Cи, C++ и оболочки Unix. Символы // и # обозначают начало однострочных комментариев, /* и */ - соответственно начало и конец многострочных комментариев.
4. Переменные и константы. Важным элементом каждого языка являются переменные, константы и операторы, применяемые к этим переменным и константам.
Переменные. Переменная в PHP обозначается знаком доллара, за которым следует ее имя (например: $my_var). Имя переменной чувствительно к регистру, т.е. переменные $my_var и $My_var различны.
Имена переменных соответствуют тем же правилам, что и остальные наименования в PHP: правильное имя переменной должно начинаться с буквы или символа подчеркивания с последующими в любом количестве буквами, цифрами или символами подчеркивания.
В PHP 3 переменные всегда присваивались по значению. То есть когда вы присваиваете выражение переменной, все значения оригинального выражения копируется в эту переменную. PHP 4, кроме этого, предлагает еще один способ присвоения значений переменным: присвоение по ссылке. Для того чтобы присвоить значение переменной по ссылке, это значение должно иметь имя, т.е. оно должно быть представлено какой-либо переменной. Чтобы указать, что значение одной переменной присваивается другой переменной по ссылке, нужно перед именем первой переменной поставить знак амперсанд &.
Константы. Для хранения постоянных величин, т.е. таких величин, значение которых не меняется в ходе выполнения скрипта, используются константы. Такими величинами могут быть математические константы, пароли, пути к файлам и т.п. Основное отличие константы от переменной состоит в том, что ей нельзя присвоить значение больше одного раза и ее значение нельзя аннулировать после ее объявления. Кроме того, у константы нет приставки в виде знака доллара и ее нельзя определить простым присваиванием значения. Для определения константы существует специальная функция define (). Ее синтаксис таков:
define ("Имя_константы", "Значение_константы", [Нечувствительность_к_регистру])
По умолчанию имена констант чувствительны к регистру. Существует соглашение, по которому имена констант всегда пишутся в верхнем регистре. Получить значение константы можно, указав ее имя. В отличие от переменных, не нужно предварять имя константы символом $. Кроме того, для получения значения константы можно использовать функцию constant () с именем константы в качестве параметра.
Кроме переменных, объявляемых пользователем, в PHP существует ряд констант, определяемых самим интерпретатором. Например, константа FILE хранит имя файла программы (и путь к нему), которая выполняется в данный момент, FUNCTION содержит имя функции, CLASS - имя класса, PHP_VERSION - версия интерпретатора PHP.
5. Управляющие конструкции. Управляющие конструкции в РНР представлены условными операторами, циклами, операторами передачи управления, операторами включения.
Условные операторы:
if. Это один из самых важных операторов многих языков, включая PHP. Он позволяет выполнять фрагменты кода в зависимости от условия. Структура оператора: if (выражение) блок_выполнения;
else. Оператор else расширяет if на случай, если проверяемое в if выражение является неверным, и позволяет выполнить какие-либо действия при таких условиях. Структура оператора: if (выражение) блок_выполнения else блок_выполнения1;
elseif. Еще один способ расширения условного оператора if. elseif - это комбинация else и if. Как и else, он расширяет if для выполнения различных действий в том случае, если условие, проверяемое в if, неверно. Но в отличие от else, альтернативные действия будут выполнены, только если elseif-условие является верным. Структура оператора:
if (выражение) блок_выполнения elseif (выражение1) блок_выполнения1 ...
else блок_выполнения N
switch. Еще одна конструкция, позволяющая проверять условие и выполнять в зависимости от этого различные действия. В зависимости от того, какое значение имеет переменная, switch переключается между различными блоками действия. switch очень похож на оператор if... elseif... else или набор операторов if. Структура оператора:
switch (выражение или переменная) { case значение1: блок_действий1 break;
case значение2: блок_действий2 break;
блок_действий_по_умолчанию }
while. Простой цикл, предписывающий PHP выполнять команды блока_выполнения до тех пор, пока выражение вычисляется как True. Значение выражения проверяется каждый раз в начале цикла, так что, даже если его значение изменилось в процессе выполнения блока_выполнения, цикл не будет остановлен до конца итерации (т.е. пока все команды блока_выполнения не будут исполнены). Структура цикла: while (выражение) { блок_выполнения };
do... while. Очень похож на цикл while, с той лишь разницей, что истинность выражения проверяется в конце цикла, а не в начале. Благодаря этому блок_выполнения цикл do... while гарантированно выполняется хотя бы один раз. Структура цикла: do {блок_выполнения} while (выражение);
for. Структура цикла: for (выражение1; выражение2; выражение3) {блок_выполнения}
foreach. Предназначен исключительно для работы с массивами. Структура: foreach ($array as $value) {блок_выполнения}.
Операторы передачи управления:
break. Заканчивает выполнение текущего цикла, может использоваться с числовым аргументом, который говорит, работу скольких управляющих структур, содержащих его, нужно завершить;
continue. Позволяет пропустить дальнейшие инструкции из блока_выполнения любого цикла и продолжить выполнение с нового круга.
Операторы включения:
include. Позволяет включать код, содержащийся в указанном файле, и выполнять его столько раз, сколько программа встречает этот оператор. Включение может производиться любым из перечисленных способов: include имя_файла; include $file_name; include ("имя_файла");
require. Действует примерно так же, как и include. Основное отличие require и include заключается в том, как они реагируют на возникновение ошибки: include выдает предупреждение, и работа скрипта продолжается; ошибка в require вызывает фатальную ошибку работы скрипта и прекращает его выполнение.
6. Обработка запросов. Формы. Любой запрос клиента к серверу должен начинаться с указания метода. Метод сообщает о цели запроса клиента. Протокол HTTP поддерживает достаточно много методов, но реально используются только три: POST, GET и HEAD. Метод GET позволяет получить любые данные, идентифицированные с помощью URL в запросе ресурса. Если URL указывает на программу, то возвращается результат работы программы, а не ее текст (если, конечно, текст не есть результат ее работы). Дополнительная информация, необходимая для обработки запроса, встраивается в сам запрос (в строку статуса). При использовании метода GET в поле тела ресурса возвращается собственно затребованная информация (текст HTML-документа, например).
Метод HEAD аналогичен методу GET, только не возвращает тело ресурса и не имеет условного аналога. Метод HEAD используют для получения информации о ресурсе. Это может пригодиться, например, при решении задачи тестирования гипертекстовых ссылок.
Метод POST разработан для передачи на сервер такой информации, как аннотации ресурсов, новостные и почтовые сообщения, данные для добавления в базу данных, т.е. для передачи информации большого объема и достаточно важной. В отличие от методов GET и HEAD, в POST передается тело ресурса, которое и является информацией, получаемой из полей форм или других источников ввода.
Формы предназначены для того, чтобы получать от пользователя информацию. В них можно вводить текст или выбирать подходящие варианты из списка. Данные, записанные в форму, отправляются для обработки специальной программе (например, скрипту на PHP) на сервере. В зависимости от введенных пользователем данных эта программа может формировать различные web-страницы, отправлять запросы к базе данных, запускать различные приложения и т.п.
Для обращения к переменным, переданным с помощью HTTP-запросов существует специальный массив - $_REQUEST. Он содержит данные, переданные методами POST и GET, а также с помощью HTTP cookies. Это суперглобальный ассоциативный массив, т.е. его значения можно получить в любом месте программы, используя в качестве ключа имя соответствующей переменной (элемента формы).
Приведем пример использования массивов $_POST и $_GET. Допустим, нам нужно обработать форму, содержащую элементы ввода с именами first_name, last_name, kurs. Данные были переданы методом POST, и данные, переданные другими методами, мы обрабатывать не хотим. Это можно сделать следующим образом:
php $str = "Здравствуйте, ". $_POST ["first_name"]." ". $_POST ["last_name"]. "!
";
$str. = "Вы выбрали для изучения курс по ".
$_POST ["kurs"];
Тогда на экране браузера, если мы ввели имя "Иван", фамилию "Петров" и выбрали среди всех курсов курс по PHP, увидим сообщение:
Здравствуйте, Иван Петров! Вы выбрали для изучения курс по PHP
7. Функции. В программировании, как и в математике, функция есть отображение множества ее аргументов на множество ее значений. То есть функция для каждого набора значений аргумента возвращает какие-то значения, являющиеся результатом ее работы.
У каждой функции может быть, как мы уже говорили, список аргументов. С помощью этих аргументов в функцию передается различная информация (например, значение числа, факториал которого надо подсчитать). Каждый аргумент представляет собой переменную или константу.
С помощью аргументов данные в функцию можно передавать тремя различными способами. Это передача аргументов по значению (используется по умолчанию), по ссылке и задание значения аргументов по умолчанию.
Когда аргумент передается в функцию по значению, изменение значения аргумента внутри функции не влияет на его значение вне функции. Чтобы позволить функции изменять ее аргументы, их нужно передавать по ссылке. Для этого в определении функции перед именем аргумента следует написать знак амперсанд "&".
В РНР существует несколько встроенных функций: echo (), print (), date (), include. Все, кроме date (), являются языковыми конструкциями. Они входят в ядро PHP и не требуют никаких дополнительных настроек и модулей. Функция date () тоже входит в состав ядра PHP и не требует настроек. Но есть и функции, для работы с которыми нужно установить различные библиотеки и подключить соответствующий модуль. Например, для использования функций работы с базой данных MySql следует скомпилировать PHP с поддержкой этого расширения. В последнее время наиболее распространенные расширения и соответственно их функции изначально включают в состав PHP так, чтобы с ними можно работать без каких бы то ни было дополнительных настроек интерпретатора.
8. Классы и объекты. Объект - это структурированная переменная, содержащая всю информацию о некотором физическом предмете или реализуемом в программе понятии, класс - это описание таких объектов и действий, которые можно с ними выполнять.
Класс определяется с помощью следующего синтаксиса:
class Имя_класса{ var $имя_свойства;
/*список свойств*/ function имя_метода () { /* определение метода */ } /*список методов*/ }
Имя класса должно удовлетворять правилам именования объектов в языке PHP, но есть ряд имен, которые зарезервированы разработчиками для своих целей. В первую очередь это имена, начинающиеся с символа подчеркивания "_". Для создания классов и функций нельзя использовать такие имена. Кроме того, зарезервировано имя stdClass, поскольку оно используется внутри движка PHP.
Переменная нужного типа создается из класса с помощью оператора new. Создав объект, мы можем применять к нему все методы и получать все свойства, определенные в описании класса. Для этого используют такой синтаксис: $имя_объекта->название_свойства или $имя_объекта->название_метода (список аргументов). Перед названием свойства или метода знака $ не ставят.
php $art = new Articles;
// создаем объект $art echo ($art - >title);
// выводим название объекта $art $another_art = new Articles;
// создаем объект $another_art $another_art->show_article ();
// вызываем метод для отображения объекта в браузер? >
Каждый из объектов класса имеет одни и те же свойства и методы. Так, у объекта $art и у объекта $another_art есть свойства title, description, author и методы Articles (), show_article (). Но это два разных объекта. Представим себе объект как директорию в файловой системе, а его характеристики - как файлы в этой директории. Очевидно, что в каждой директории могут находиться одинаковые файлы, но тем не менее они считаются различными, поскольку хранятся в разных директориях. Точно так же свойства и методы считаются различными, если они применяются к разным объектам. Чтобы получить нужный файл из директории верхнего уровня, мы пишем полный путь к этому файлу. При работе с классами нужно указывать полное имя функции, которую мы хотим вызвать. Директорией верхнего уровня в PHP будет пространство глобальных переменных, а путь указывается с помощью разделителя - >. Таким образом, имена $art->title и $another_art->title обозначают две разные переменные.
9. Работа с файлами. В PHP не существует функции, предназначенной именно для создания файлов. Большинство функций работают с уже существующими файлами в файловой системе сервера. Чтобы создать самый обычный файл, нужно воспользоваться функцией, которая открывает локальный или удаленный файл. Называется эта функция fopen (). Она связывает данный файл с потоком управления программы. Причем связывание бывает различным в зависимости от того, что мы хотим делать с этим файлом: читать его, записывать в него данные или делать и то и другое. Синтаксис этой функции такой:
resource fopen (имя_файла, тип_доступа [, use_include_path])
В результате работы эта функция возвращает указатель (типа ресурс) на открытый ею файл. В качестве параметров этой функции передаются: имя файла, который нужно открыть, тип доступа к файлу (определяется тем, что мы собираемся делать с ним) и, возможно, параметр, определяющий, искать ли указанный файл в include_path.
Значения, принимаемые параметром тип_доступа:
r - открывает файл только для чтения; устанавливает указатель позиции в файле на начало файла.
r+ - открывает файл для чтения и записи; устанавливает указатель файла на его начало.
w - открывает файл только для записи; устанавливает указатель файла на его начало и усекает файл до нулевой длины. Если файл не существует, то пытается создать его.
w+ - открывает файл для чтения и записи; устанавливает указатель файла на его начало и усекает файл до нулевой длины. Если файл не существует, то пытается создать его.
a - открывает файл только для записи; устанавливает указатель файла в его конец. Если файл не существует, то пытается создать его.
a+ - открывает файл для чтения и записи; устанавливает указатель файла в его конец. Если файл не существует, то пытается создать его.
x - создает и открывает файл только для записи; помещает указатель файла на его начало. Если файл уже существует, то fopen () возвращает false и генерируется предупреждение. Если файл не существует, то делается попытка создать его. Этот тип доступа поддерживается начиная с версии PHP 4.3.2 и работает только с локальными файлами.
x+ - создает и открывает файл для чтения и записи; помещает указатель файла на его начало. Если файл уже существует, то fopen () возвращает false и генерируется предупреждение. Если файл не существует, то делается попытка создать его. Этот тип доступа поддерживается, начиная с версии PHP 4.3.2, и работает только с локальными файлами.
После выполнения необходимых действий с файлом, будь то чтение или запись данных или что-либо другое, соединение, установленное с этим файлом функцией fopen (), нужно закрыть. Для этого используют функцию fclose (). Синтаксис у нее следующий:
fclose (указатель на файл)
Для того, чтобы записать данные в файл, доступ к которому открыт функцией fopen (), можно использовать функцию fwrite (). Синтаксис у нее следующий:
int fwrite (указатель на файл, строка [, длина])
Эта функция записывает содержимое строки в файл, на который указывает указатель на файл. Если указан дополнительный аргумент длина, то запись заканчивается после того, как записано количество символов, равное значению этого аргумента, или когда будет достигнут конец строки.
Пусть в нашей рабочей директории нет файла my_file.html. Создадим его и запишем в него строку текста:
php $h = fopen ("my_file.html","w");
$text = "Этот текст запишем в файл";
if (fwrite ($h,$text)) echo "Запись прошла успешно";
else echo "Произошла ошибка при записи данных";
В результате работы этого скрипта в браузере мы увидим сообщение о том, что запись прошла успешно, а в файле my_file.html появится строка "Этот текст запишем в файл". Если бы этот файл существовал до того, как мы выполнили этот скрипт, все находящиеся в нем данные были бы удалены.
Если мы хотим прочитать данные из существующего файла, одной функции fopen () недостаточно. Она лишь возвращает указатель на открытый файл, но не считывает ни одной строки из этого файла. Поэтому для того, чтобы прочитать данные из файла, нужно воспользоваться одной из специальных функций: file, readfile, fread, fgets и т.п.
Функция fread осуществляет чтение данных из файла. Ее можно использовать и для чтения данных из бинарных файлов, не опасаясь их повреждения. Синтаксис fread ():
string fread (указатель на файл, длина)
В результате работы функция fread () возвращает строку со считанной из файла информацией.
string fgets (указатель на файл [, длина])
В результате работы функция fgets () возвращает строку длиной (длина минус 1) байт из файла, на который указывает указатель на файл. Чтение заканчивается, если прочитано (длина минус 1) символов и встретился символ перевода строки или конец файла.
Функция readfile () считывает файл, имя которого передано ей в качестве параметра имя_файла, и выводит его содержимое на экран.
Синтаксис:
int readfile (имя_файла [, use_include_path])
Функция file () предназначена для считывания информации из файла в переменную типа массив. Синтаксис у нее такой же, как и у функции readfile (), за исключением того, что в результате работы она возвращает массив:
array file (имя_файла [, use_include_path])
Для того, чтобы удалить файл с помощью языка PHP, нужно воспользоваться функцией unlink (). Синтаксис этой функции можно описать следующим образом: bool unlink (имя_файла)
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение
высшего профессионального образования
"Глазовский государственный педагогический институт
имени В.Г. Короленко"
Факультет социальных и информационных технологий
Кафедра информатики
Выпускная квалификационная работа
Создание динамических сайтов средствами Dreamweaver
Выполнила
студентка группы 951 О.А. Богданова
Руководитель работы,
старший преподаватель
кафедры информатики Д.А. Горбушин
Глазов 2007
Введение
Глава I. Интерфейс среды Dreamweaver. Обзор популярных интернет-технологий создания динамических сайтов
1.1 Интерфейс среды Dreamweaver
Выводы по Главе I
Глава II. Методика выбора оптимального средства разработки
2.1 Выделение критериев сравнения популярных интернет-технологий
Выводы по Главе II
Глава III. Разработка динамических веб-страниц на базе различных технологий средствами Dreamweaver
3.1 Записная книжка на базе РНР
3.2 Электронный прайс-лист на базе XML
3.3 Тест на базе ASP
Выводы по Главе III
Заключение
Библиографический список
Введение
WorldWideWeb- глобальная компьютерная сеть - на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - веб-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW.Вся информация в веб-браузере отображается в виде веб-страниц, которые являются основным элементом байтов WWW.
Можно выделить следующие классификации веб-документов: по возможности изменения содержания и структуры - статические (трудоемкое и неудобное обновление) и динамические (более простое и быстрое обновление); по наличию обратной связи - пассивные (пользователь имеет возможность лишь просматривать информацию) и активные (пользователь имеет возможность обмениваться данными с сервером, участвовать в интерактивном диалоге). В данной работе интерес для нас представляют активные динамические веб-документы.
Создать качественную веб-страницу непросто, для этого потребуются не только навыки дизайнера, но и опыт программирования. Для облегчения этих задач существуют специальные программы. Наиболее известным и эффективным инструментом создания веб-сайтов является продукт компании Macromedia- DreamweaverMX. Это мощная среда, предназначенная для проектирования, разработки и администрирования профессиональных веб-сайтов и приложений. Dreamweaver MX позволяет создавать сайты на базе различных веб-технологий: HTML, XHTML, XML, ColdFusion, ASP, ASP.net, JSP и PHP.
Цель нашей работы - исследование возможностей применения Dreamweaverдля реализации веб-технологий: ASP, PHP и XML при разработке динамических сайтов.
Гипотеза основана на предположении, что использование единой интегрированной среды разработки, в которой возможна реализация различных веб-технологий, оптимизирует процесс построения динамических сайтов.
Объект работы - технологии разработки динамических сайтов.
Предмет работы - методы построения динамических сайтов средствами Dreamweaver.
Для построения сайта, написания сценариев для него можно использовать текстовые редакторы, вручную набирая код, специальные приложения для реализации отдельных технологий (например, Rapid PHP Editor), программы создания веб-страниц (например, FrontPage). Но только среда Dreamweaver позволяет создавать динамические веб-документы, соответствующие международным стандартам, интегрировать программный код в HTML-код, использовать при создании одного документа сразу несколько технологий. Поэтому работа, посвященная разработке динамических сайтов средствами Dreamweaver, является актуальной .
Новизна данной работы заключается в том, что была рассмотрена технология создания динамических сайтов на базе различных технологий в рамках одного инструмента.
Цель, гипотеза, объект и предмет определяют следующие задачи :
обзор и изучение литературы по исследуемой проблеме;
ознакомление с технологиями ASP, PHP и XML в рамках Dreamweaver;
выделение критериев сравнения технологий;
подготовка методики анализа прикладных задач с целью выбора оптимальной технологии для их реализации;
применение разработанной методики при решении конкретных прикладных задач.
Наша работа состоит из введения, трех глав, заключения и списка литературы.
Научная и теоретическая значимость исследования. В работе были изложены теоретические основы сайтостроения средствами разных технологий, реализуемых в рамках одного инструмента.
Практическая значимость исследования. Разработанная методика позволит легко и точно выбрать оптимальную технологию при создании сайта.
На защиту выносятся следующие положения :
использование различных технологий в рамках одного инструмента является рациональным и эффективным;
даже в рамках одного инструмента актуален выбор технологии, дающей оптимальный результат.
Глава I. Интерфейс среды Dreamweaver. Обзор популярных интернет-технологий создания динамических сайтов
1.1 Интерфейс среды Dreamweaver
Мощная профессиональная среда Dreamweaver обладает всеми необходимыми средствами для генерации страниц HTML любой сложности и масштаба. Она обеспечивает режим визуального проектирования (WYSIWYG или WhatYouSeeIsWhatYouGet- "что ты видишь, то ты и получишь"), отличается очень чистой работой с исходным текстом веб-документов, обладает встроенными средствами поддержки больших сетевых проектов. Ни в одном из существующих в наше время редакторов концепция WYSIWYG не реализована полностью. Программа Dreamweaver подошла к декларируемому идеалу ближе конкурентов. Прямая работа с кодами не исключена полностью, но сведена к разумному минимуму. Программа не только обладает мощным арсеналом средств визуального проектирования, но и способна отображать веб-страницы почти как специализированные программы просмотра: MicrosoftInternetExplorer или NetscapeNavigator.
Macromedia Dreamweaver MX - одна из самых мощных программ, поддерживающих все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, она содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе.
Интерфейс программы по сравнению с предыдущими версиями претерпел изменения. Новый стиль заметно облегчает работу с программой. Если в предыдущих версиях программы приходилось постоянно переключаться между окнами, то теперь можно одновременно работать и с кодом, и с конечным видом сайта, что существенно облегчает работу.
При загрузке Dreamweaver появляется стартовое окно (рис.1), позволяющее выбрать тип нового создаваемого документа (HTML, ColdFusion, PHP и др.), либо создать документ по готовым образцам (CSSStyleSheets, Framesets и др.), а также открыть недавно использовавшиеся документы. Кроме этого имеются ссылки на интернет-ресурсы: сайт Dreamweaver MX Exchange, обзор программы Dreamweaver MX и справочная информация по Dreamweaver MX.
Рис.1. Стартовое окно Dreamweaver MX
Рабочая область Dreamweaver содержит следующие окна и панели:
окно документа (рис.2), позволяющее просматривать и редактировать код документа (Code), просматривать внешний вид будущего документа (Design) или одновременно код и внешний вид (Split). Также имеется возможность просмотра документа в интернет-браузере, проверки ошибок и т.д.;
Рис.2. Окно документа
Стандартное раскрывающееся меню (File, Edit, View, Insert, Modify, Text, Commands, Site, Window, Help) (рис.3);
Рис.3. Стандартное раскрывающееся меню
Панель Properties (Свойства) (рис.4), позволяющая менять и добавлять свойства выделенного фрагмента кода;
Рис.4. Панель Properties
Панель Insert (Вставка) (рис.5), включающая следующие вкладки: Common (Основные) - вставка гиперссылок, таблиц, рисунков, комментариев и т.д., а также TagChooser (Выбор тега); Layout (Разметка) - использование ячеек и таблиц для разметки документа перед добавлением содержимого; Forms (Формы) - добавление различных видов форм; Text (Текст) - форматирование текста и FontTagEditor (Редактор тегов текста); HTML- добавление горизонтальной линии, элементов таблицы, фреймов, свойств head, скриптов; Application (Приложения) - работа с информационными структурами; Flashelements (элементы Flash) - добавление Flash-роликов, Favorites (Избранное) - возможность добавления на отдельную вкладку наиболее часто используемых объектов.
Рис.5. Панель Insert
Группа панелей: Design (содержит стили CSS), Code (содержит справку по тегам, объектам и функциям различных технологий), Application (содержит информацию о базах данных, компонентах и т.д.), Files (Диспетчер файлов) (Рис.6).
Рис.6. Группа панелей Design, Code, Application, Files
1.2 PHP
1. Общие сведения. PHP - это язык обработки гипертекста (HTML), используемый на стороне сервера (serversidescriptinglanguage), конструкции которого вставляются в HTML-текст. Его цель - позволить максимально быстро создавать динамически генерируемые web-страницы. PHP является открытым программным продуктом, что означает его бесплатность и возможность создавать свои собственные расширения языка.
PHP является самым молодым, перспективным и быстроразвивающимся из языков программирования для Интернет, доля его использования по сравнению с другими языками быстро растет.
На рисунке ниже показан интерфейс Adobe Dreamweaver. В разных версиях программы могут быть некоторые отличия.
- Кнопка выбора макета
- Кнопка выбора расширений
- Кнопка работы с веб-сайтом
- Кнопка выбора интерфейса (переключатель рабочих пространств - выбор из 11 вариантов). На рисунке - классический интерфейс
- Строка меню (10 меню с раскрывающимися списками команд)
- Строка вкладок (категорий) - 9 вкладок для разных видов работ
- Панель инструментов . Панель инструментов меняется в зависимости от выбранной вкладки (на рисунке - панель инструментов для вкладки Текст ). Строка вкладок (п.6) и панели инструментов (п.7) вместе образуют "Панель вставка"
- Строка открытых документов
- Панель инструментов для работы с кодом
- Нумерация строк кода
- Раздел кода (при разделении окна редактирования на код и дизайн)
- Строка состояния (примененные тэги, скорость загрузки страницы, примененная кодировка).
- Группа панелей "Результаты" (поиск, справочник, проверка ссылок, отчеты и др.)
- Док панелей - может содержать панели Файлы, Активы, Фрагменты кода, Базы данных, Стили, Инспектор тэгов и др. Док панелей открывается / убирается из окна программы, используя меню Окно - Скрыть панели / Показать панели .
- Раздел дизайна (при разделении окна редактирования на код и дизайн)
Окно редактирования (окно документа)
Окно редактирования занимает центральное место в окне
программы.
Страница в окне редактирования может быть открыта в режиме
кода, в режиме разделения на код и визуальный режим редактирования, в
режиме Дизайна или в режиме интерактивного просмотра (более реальный
вид страницы).
Представление «Интерактивный код»
Доступно
только при просмотре
документа в представлении «Интерактивный просмотр» и отображает
реальный код. Представление «Интерактивный
код» не поддерживает редактирование.
Панели инструментов :
Стандартная панель инструментов (создать, открыть, сохранить, вставить и т.д)
Компоненты
Базы данных
Поведения сервера
Редактор тегов Quick Tag - используется, когда требуется быстро проверить, вставить или изменить теги HTML, не закрывая представление «Дизайн».
Панель приложений В верхней части окна приложения находится переключатель рабочих пространств, меню (только в Windows) и другие элементы управления.
Селектор тегов Размещается в строке состояния. Показывает иерархию тегов.
Программный пакет DreamWeaver, как и FrontPage, предназначен для проектирования различных сайтов, в том числе - сайтов издательств, одной из задач которых является распространение электронных изданий. Он пригоден как для создания небольших, так и очень больших сайтов. В первом случае разработкой занимается единственный специалист- вебмастер. В последнем случае над проектом работает целый коллектив, включающий администратора проекта, веб-дизайнера, HTML-верстальщика, веб-программиста, корректора, менеджера рассылок. Многие специалисты утверждают, что профессиональные Web-дизайнеры в своей работе чаще всего используют Adobe PhotoShop для подготовки графики и Macromedia DreamWeaver для дизайна отдельных Web-страниц.
Знакомство с этим пакетом показывает, что это утверждение имеет под собой прочную основу. Как уже делалось несколько раз, начнем изучение пакета с его интерфейса.
6.2.1. Интерфейс пакета DreamWeaver
Интерфейс пакета DreamWeaver 4.0 показан на рис. 6.9. Помимо строки заголовка, строки меню, панели инструментов и стандартного рабочего окна программы отметим наличие нескольких палитр, которые, как и в графических редакторах, размещаются в рабочем окне программы. Кстати, названия открытых трех палитр «Объекты» (Object), «Свойства» (Properties) и «Загрузить» (Launcher) соответствуют первым трем командам секции меню «Окно» (Window).
Данный пакет интегрирован с точки зрения используемых технологий в группу программных продуктов фирмы Macromedia, которая завоевывает все более прочные позиции на рынке средств Web-дизайна. Другие программы этой группы: Macromedia Director и Flash будут рассмотрены в следующих параграфах этой главы. В совокупности они обеспечивают основные направления Web-дизайна, а каждая в отдельности специализирована в одном конкретном направлении.
Вначале остановимся на палитре «Объекты» (Objects), внешний вид которой представлен на рис. 6.10. Внешний вид палитры изменяется в зависимости от типа объекта, выбранного в списочном окне в ее верхней части, т. е. палитру можно назвать адаптивной. По умолчанию в списке устанавливается позиция «Основные» (Common). На рис. 6.10в открытом списке выбран именно этот вариант. Эта палитра с помощью 18-ти различных инструментов позволяет включать в состав страницы различные элементы, в частности (по порядку расположения кнопок в палитре): графику (Image), анимированную кнопку (Rollover Image), внешний вид которой изменяется при подведении к ней курсора мыши, таблицу (Table), таблицу с занесенными в нее данными, подготовленными заранее в другом программном пакете (Tabular Data), линейку (Horizontal Rule), навигационную панель (Navigation Bar) с кнопками для перемещения по сайту, новый изобразительный слой (Draw Layer), мягкий перенос (Line Break) в текст, ссылку на электронный адрес (E-mail Link), текущую дату (Оат.е),флеш- (Flash) и шоквэйв- (Shockwave) анимацию, заготовку Generator и объект FireWorks, Java-апплеты и элементы ActiveX, объекты, воспроизводимые с помощью дополнительных модулей (Plag-ins), и внешний HTML-файл (SSI).
Палитра «Шрифтовые элементы» (Characters) позволяет добавить на Web-страницы один из 12-ти различных специальных символов: переход на новую строку, авторского права (копирайт), зарегистрированный торговый знак, денежные знаки, в том числе, фунт стерлингов, иена, евро, а также кавычки, тире и другие знаки (см. рис. 6.11).
Палитра «Формы» (Forms), показанная на рис. 6.12, служит для создания форм (см. § 2.8 ) и содержит следующие кнопки: собственно форма (Forms), текстовое поле (Text field), кнопка (Button), переключатели Checkbox и Radio Batton, список/меню (List/menu), поле для передачи файлов (Filefield) и изображений (Imagefield), скрытое поле (Hidden field) и указатель гиперссылки для перехода на другой сайт (Jump menu).
Отметим, что в нижней части всех палитр группы «Объект» предусмотрены поля «Выравнивание» (Layout) и «Просмотр» (View), которые позволяют наблюдать и управлять размещением объектов на Web-странице.
Палитра «Фреймы» (Frames), показанная на рис. 6.13, позволяете помощью соответствующей кнопки выбирать определенный вид фреймовой структуры страницы с двумя, тремя и четырьмя различным образом расположенными фреймами. Общее число вариантов равно восьми.
Палитра «Заголовочная часть» (Head) позволяет добавлять в заголовочную часть HTML-документа соответствующие теги и значения параметров, в том числе: теги метаинформации и ключевые слова, описание сайта, параметры его обновления, значение базовой ссылки (ссылки по умолчанию), ссылки для связей.
Палитра «Невидимые объекты» (Invisibles), показанная на рис. 6.14, позволяет разместить на странице закладки (см. также§ 4.2 и§ 4.3 ), сноски и комментарии (см. § 2.5 ) и Java-скрипты (см. § 2.9 ).
Последняя палитра, входящая в состав комплексной адаптивной палитры «Объекты», носит название «Специальная» (Special). В ней, как показано на рис. 6.16, имеются три пиктограммы или кнопки, а именно: апплеты, плагины и элементы ActiveX.
1.1. Установка
Искушенный пользователь не найдет в процедуре установки программы ничего нового для себя. На дистрибутивном диске надо разыскать и запустить на выполнение программу Dreamweaver 4 lnstaller.exe (инсталлятор). Как и большинство приложений Windows, программа устанавливается в несколько этапов, каждый из которых представлен отдельным диалоговым окном.
Последовательно перечислим основные этапы работы программы установки.
- Extracting Files (Извлечение файлов). На этом этапе из архивов извлекаются файлы, необходимые для работы программы-инсталлятора и установки системы Dreamweaver. Этап не требует вмешательства пользователя.
- Welcome (Добро пожаловать). Первый этап собственно установки, на котором пользователь получает основные сведения о выбранной программе и правилах ее инсталляции.
- License Agreement (Лицензионное соглашение). На втором этапе предлагается ознакомиться с лицензионным соглашением и авторскими правами на программный продукт. Пользователь должен принять предлагаемые обязательства или отвергнуть их.
- Macromedia Dreamweaver Serialization (Регистрация программы). На третьем этапе появляется диалоговое окно, в которое следует ввести реквизиты пользователя и серийный номер программы.
- Choose Destination Location (Расположение). На этом этапе требуется вы брать диск и папку для установки программы. Адрес, отличный от предлагаемого по умолчанию, можно задать при помощи стандартной для операционной системы Windows процедуры выбора активного диска и каталога. Запускается процедура щелчком на кнопке Browse (Обзор).
- Default Editor (Редактор по умолчанию). На этом этапе работы процедуры установки предлагается выбрать типы файлов, для которых программа Dreamweaver будет основным редактором, используемым по умолчанию.
- Select Program Folder (Выбрать папку программы). Здесь следует выбрать папку, в которой будет находиться ярлык для запуска программы. Напомним, что доступ к этой папке и ее содержимому можно получить при помощи кнопки Пуск и меню Программы. В нелокализованной версии операционной системы они обозначаются соответственно: Start и Programs. По умолчанию инсталлятор предлагает для этих целей папку \Macromedia Dreamweaver 4.
Все дальнейшие операции установки не требуют вмешательства пользователя. Инсталлятор распаковывает архивы, создает систему каталогов и подкаталогов, копирует в нее все необходимые для работы файлы и выводит на экран содержимое гипертекстового файла с описанием возможностей программы, ссылками на полезные информационные источники и краткими сведениями о фирменных программных продуктах. Для запуска программы Dreamweaver не требуется обычная в таких случаях перезагрузка операционной системы. Программа готова к работе сразу после установки.
1.2. Запуск программы
Операционные системы семейства Windows 9x предлагают пользователю несколько различных способов запуска программ.
После установки пакета в Главное меню Windows добавляется специальный раздел с командами для запуска программы Dreamweaver и сопутствующих файлов. Конкретный вид этих команд зависит от версии операционной системы и редакции самого пакета. В любом случае команда для запуска пакета будет примерно такой: Пуск > Программы > Macromedia Dreamweaver 4 > Dreamweaver 4. Это официальный, штатный способ запуска программы, доступный в операционной среде любой конфигурации.
С ростом числа установленных приложений Главное меню Windows увеличивается в размерах и запуск приложений с его помощью становитсявсе менее удобным. Операционная система предлагает несколько способов упрощения этой процедуры.
Создание ярлыка
Самым простым и удобным способом является, видимо, запуск программы при помощи ярлыка. Ярлык отображается в виде специального значка. Он представляет собой ссылку на программу и может располагаться в любой папке Windows. Вид значка и подпись под ним выбираются обычно так, чтобы они соответствовали стилю, принятому в программе. Двойной щелчок мышкой на ярлыке запускает связанную с ним программу.
Сразу после установки программы на Рабочем столе отображается папка с ярлыком Dreamweaver. Это самый подходящий момент для того, чтобы создать копию ярлыка в удобном месте Рабочего стола. Если этого не сделать сразу, то при последующих сеансах работы потребуется приложить большие усилия.
Чтобы поместить на Рабочий стол ярлык программы Dreamweaver, надо выполнить следующую последовательность шагов.
- В окне Мой компьютер или при помощи программы Проводник найдите значок программы Dreamweaver. По умолчанию программа устанавливается в папку C:\Program Files\Macromedia\Dreamweaver 4.
- Зацепите значок мышкой и перетащите его на свободное место Рабочего стола или окна папки.
- Ярлык получит стандартное имя Ярлык для Dreamweaver.exe, которое можно и изменить. Для этого следует, не отменяя выбора значка, нажать клавишу F2, ввести с клавиатуры новое имя и подтвердить его нажатием на клавишу ENTER.
Запуск с клавиатуры
В операционной системе Windows многие действия можно выполнить при помощи клавиатурных комбинаций (“горячих клавиш”). Клавиатурные комбинации позволяют быстро, без обращения к сложной системе вложенных меню, изменить установку или параметр, получить доступ к ресурсам и, в частности, запустить программу.
Существует несколько способов назначить команде подходящий “клавишный аккорд”. Пусть ярлык программы Dreamweaver создан и находится на Рабочем столе системы Windows. Рассмотрим самый простой способ создании горячей клавиши:
- щелкните правой кнопкой мыши на ярлыке программы и выберите в открывшемся контекстном меню пункт Свойства;
- в открывшемся диалоговом окне Свойства: Dreamweaver 4 выберите вкладку Ярлык;
- щелкните на поле Быстрый вызов и введите в него выбранную клавиатурную комбинацию для запуска пакета. Подтвердите выбор щелчком на кнопке. Применить и закончите работу с окном щелчком на кнопке ОК. В качестве клавиатурных сокращений можно использовать сочетания управляющих клавиш CTRL, ALT, SHIFT с алфавитно-цифровыми клавишами или специальными клавишами F1-F12.
Автоматический запуск
Если пакет Dreamweaver используется очень интенсивно и его приходится запускать в каждом сеансе работы, то процедуру вызова целесообразно полностью автоматизировать. Для этого достаточно поместить ярлык программы в специальную папку Автозагрузка. Все программы, расположенные в этой папке, система Windows запускает при каждом включении компьютера и запуске операционной системы.
Поместить ярлык программы в папку Автозагрузка можно несколькими способами. Основная сложность состоит в том, что у этой папки очень громоздкий адрес: C:\Windows\Главное меню\Программы\Автозагрузка. Чтобы добраться до нее, придется проделать длинный путь по файловой системе Windows. Намного проще сделать это при помощи штатных средств поиска.
- В Главном меню дайте команду: Пуск > Найти > Файлы и папки.
- Откроется диалоговое окно для поиска файлов и папок. В поле Имя введите образец для поиска: Автозагрузка; в поле. Где искать укажите имя логического диска, на который установлена операционная система. Запустите поиск щелчком на кнопке Найти.
- Удерживая нажатой клавишу CTRL, зацепите ярлык программы Dreamweaver и перетащите его с Рабочего стола на значок папки Автозагрузка, расположенный в нижней части окна Найти.
Любой способ запуска программы имеет одинаковые последствия. Программа начинает работу, загрузив в окно документа пустую страницу. Эта страница создается па основе шаблона Default.htm, расположенного в подкаталоге \Configuration\Templates внутри папки программы.
1.3. Интерфейс
Под интерфейсом в информатике понимают совокупность средств и правил, обеспечивающих взаимодействие различных компонентов программы и пользователя. Способ общения, который предлагает пакет Dreamweaver, базируется на привычных для современного пользователя принципах графического оконного интерфейса. По своему внешнему виду программа далека от haute couture некоторых продуктов фирмы Microsoft Это, скорее, уровень добротного pret a porte со всем необходимым для результативной работы. По сравнению с другими программами того же класса и функционального назначения пакет Dreamweaver обладает более ясным, гибким и одновременно мощным интерфейсом. Его главными “несущими конструкциями” являются палитры, многочисленные клавиатурные комбинации и строка меню.
У [налоговые окна, которые остаются на экране после прекращения всех операций с ними, принято называть палитрами (palette) или панелями (panel). Окна, способные располагаться в любом месте экрана, а не только н специально отведенных для этого позициях, обычно называют плавающими палитрами (floatingpalette). Большинство диалоговых окон программы Dreamweaver выполнено в виде плавающих палитр.
Небольшие различия, которые существуют между палитрами и панелями, не имеют принципиального значения для описания программы. Поэтому в дальнейшем будем использовать эти термины как синонимы.
Почти все палитры обладают способностью к объединению. Это означает, что разные палитры можно совместить в одном диалоговом окне. Операция объединения позволяет получить многофункциональные сборные палитры, которые содержат средства управления, относящиеся к разным темам или командам. Палитры, обладающие способностью к объединению (их в программе большинство), будем называть модульными (dockable). Сложные палитры, состоящие из нескольких отдельных модулей, называются сборными (tabbed).
Нa рис. 1.1 показан внешний вид программы с четырьмя раскрытыми диалоговыми окнами. Самым востребованным средством управления, бесспорно, является палитра Property inspector (Инспектор свойств). С ее помощью выполняется множество операций по форматированию и редактированию объектов па страницах HTML. Палитра Behaviors (Режимы) - это пример модульной плавающей палитры. Программа Dreamweaver располагает примерно дюжиной подобных объектов, предназначенных для решения раз-
Рис. 1.1. Внешний вид окна программы
личных проектных задач. На рисунке приведен пример сборной палитры, которая состоит из двух простых модульных палитр: Layers (Слои) и History (Предыстория). Палитра Objects (Объекты) предназначена для вставки внешних объектов: рисунков, таблиц, слоев, фреймов и пр. Все остальные элементы управления, показанные на рисунке, являются неотъемлемыми составными частями окна документа.
Многие находят интерфейс программы Dreamweaver избыточным, вкладывая в это понятие некоторый оттенок предосудительности. Бесспорно, излишек выразительных средств или понятий - это недостаток, если речь идет о формулировке физических гипотез или доказательстве математических теорем. Но позитивистское отношение к избыточности, утвердившееся в точных науках, нельзя применять расширительно. В основе надежного функционирования технических систем, живучести биологических организмов, удобства интерфейсов программных продуктов лежит правильно организованная избыточность. Почти для всех основных команд форматирования и редактирования пакет Dreamweaver предлагает несколько различных способов реализации. Счастливые обладатели широкоформатных экранов могут выполнять их посредством палитр и панелей. Пользователям, обделенным экранным пространством, программа предлагает команды строки меню и клавиатурные комбинации.
Окно документа
Окно документа - это то рабочее пространство, где создаются гипертекстовые документы (рис. 1.2). Оно хранит текст, картинки, таблицы, формы и другие объекты, которые составляют содержимое страниц HTML. Программа Dreamweaver является редактором класса WYSIWYG. Эта громоздкая аббревиатура образована по первым буквам английской фразы What you see is what you get (что видите, то и получите). Это значит, что изображение страницы HTML в окне документа не сильно отличается от ее представления в наиболее популярных программах просмотра - броузерах Microsoft Internet Explorer и Netscape Navigator. Несмотря на то, что прямая работа с кодами HTML считается признаком высокого профессионализма, даже самый искушенный Web-дизайнер едва ли откажется от преимуществ, которые дает графический интерфейс и создание документов в режиме WYSIWYG.
Рис. 1.2. Окно документа
В отличие от большинства приложений Windows программа Dreamweaver не может работать с несколькими документами в одном окне программы. В зависимости от выбранных установок новый документ загружается в отдельное окно программы или заменяет ранее открытый документ в текущем окне. При таком режиме работы разницы между окном программы и окном документа практически нет. Поэтому далее мы будем использовать эти названия как синонимы.
Режимы работы
В режиме WYSIWYG создание гипертекстового документа немногим отличается от работы с обычным текстовым редактором.
Базовые операции ввода и форматирования текста, команды вставки объектов, техника навигации и выбора - все эти приемы реализованы в программе Dreamweaver в стиле, который доминирует в визуальных средах последние несколько лет. Разработчик может работать с документом, используя привычные средства редактирования и форматирования и не задумываясь о том, как реализуются его проектные решения средствами языка HTML. Пакет Dreamweaver автоматически создает исходный текст, в котором информационное наполнение документа и его оформление записывается в кодах языка разметки гипертекста.
Несмотря на то, что большая часть созидательной работы может быть выполнена в режиме WYSIWYG, иногда приходится прибегать к прямому кодированию. Причин тому несколько. Главным образом, это необходимость тонкой настройки кодов разметки. Кроме того, в стандарте языка HTML упоминается более сотни дескрипторов, каждый из которых может иметь несколько атрибутов или модификаторов. Трудно представить себе программу, в которой все лексические единицы языка HTML поддержаны элементами управления: кнопками или командами. В рамках интерфейса системы Dreamweaver свое воплощение нашли самые востребованные средства гипертекстовой разметки. Малоупотребительные коды приходится вводить вручную.
Все версии программы Dreamweaver, начиная с первой, предоставляют пользователю возможной прямого редактирования кодов разметки. Какие средства применяются для этой работы? Во-первых, это специальный встроенный редактор Code Inspector (Инспектор кодов), который сопровождает программу Dreamweaver с самых первых версий и претерпел за это время только косметические изменения. Во-вторых, пользователь имеет возможность подключить внешний редактор HTML по собственному выбору. В этой роли могут выступать различные программы: от простейших текстовых редакторов универсального назначения (например, Блокнот) до высокоспециализированных программных средств, предназначенных для работы со сложными гипертекстовыми документами (Allaire HomeSite).
В четвертой версии редактора появилась очень удачная новинка - режимы работы окна документа. Окно документа может находиться в одном из трех режимов или видов.
- Design View (Режим планировки). Это обычный для визуального редактора режим WYSIWYG, в котором отображаются объекты гипертекстовой страницы, их форматирование и расположение. От пользователя скрыты коды разметки, с помощью которых решаются информационные и оформительские задачи создания гипертекстового документа. Далее будем иногда называть этот режим визуальным.
- Code View (Режим разметки). В этом режиме в окне документа отображается полный исходный код гипертекстовой страницы, со всеми дескрипторами, метатегами, сценариями и комментариями. Этот режим работы будем называть кодовым. На рис. 1.3 показана пустая страница в режиме отображения кодов. Каждая новая страница, не содержащая ни одного текстового или графического объекта, автоматически получает базовую гипертекстовую разметку.
Рис. 1.3. Окно документа в режиме разметки
Code and Design View (Режим разметки и планировки). Это комбинированный режим, в котором окно документа расщепляется на две секции. В одной секции отображаются коды гипертекстовой разметки, в другой программа показывает планировку страницы со всеми объектами и атрибутами форматирования. На рис. 1.4. показано расщепленное окно документа, в котором представлена пустая страница.)
Рис. 1.4. Расщепленное окно документа
Имеется несколько способов изменения режима работы. Во-первых, это команды строки меню: View > Code (Вид > Разметка), View > Design (Вид > Планировка), View > Code and Design (Вид > Разметка и планировка). Во-вторых, на панели инструментов представлены кнопки, позволяющие быстро переходить из одного режима в другой. Наконец, при помощи клавиатурной комбинации CTRL+TAB можно переходить из режима планировки в режим разметки и обратно или перемещаться из одной части расщепленного окна в другую.
Размеры частей расщепленного окна документа можно менять. Для этого следует зацепить указателем разделительную линию и перетащить ее.
Среди программистов получил хождение термин “исходный текст”. Так называется программа, записанная на языке программирования высокого уровня, на начальных этапах ее разработки. Этот термин неплохо передает отношения, существующие между кодовой частью гипертекстового документа и его видимым образом. Запись документа на языке HTML будем называть исходным текстом.
Строка меню
Строка меню - это непременный атрибут любого приложения Windows. Она открывает доступ к командам, диалоговым окнам, кнопкам, с помощью которых выполняется вся содержательная работа по созданию документа, настройке программы, управлению процессом визуализации и пр.
Каждый пункт строки меню объединяет группу функционально близких команд, которые образуют иерархию вложенных меню и подменю. Приведем краткое описание этих пунктов.
- Меню File (Файл) объединяет основные файловые команды, средства работы с шаблонами гипертекстовых документов, команды экспорта, импорта и просмотра во внешних броузерах.
- В меню Edit (Правка) входят команды, управляющие буфером обмена, средства поиска, директивы выбора объектов и настройки программы. Отдельный раздел составляют команды, управляющие кодами гипертекстовой разметки.
- Все пункты меню View (Вид) имеют близкое назначение. Здесь объединены средства визуализации вспомогательных элементов интерфейса и объектов гипертекстового документа.
- В меню Insert (Вставка) входят команды импорта различных объектов: изображений, таблиц, сценариев, форм, слоев, специальных символов, метадескрипторов и пр.
- Меню Modify (Изменить) объединяет средства и команды для изменения атрибутов объектов гипертекстового документа.
- Меню Text (Текст) включает в себя ресурсы программы, связанные с созданием текстовых фрагментов и их форматированием.
- Содержимое меню Commands (Команды) составляют различные командные средства, предназначенные для автоматической обработки гипертекстовых документов: сценарии, верификаторы кодов, утилиты и пр.
- Пункт Site (Сайт) в строке меню включает в себя средства работы с сайтами и связанными системами гипертекстовых документов, обладающими сложной структурой и многочисленными ссылками.
- В меню Window (Окно) входят команды визуализации палитр, панелей и диалоговых окон программы.
- В меню Help (Справка) расположены команды вызова интерактивной справки, запуска электронного учебника, средства автоматической электронной регистрации и запуск демонстрационного ролика.
Панель инструментов
Панель инструментов выполняет функции основного диспетчерского пульта программы (рис. 1.5). Она объединяет кнопки вызова наиболее востребованных команд и ресурсов редактора. Эта компактная панель существенно сокращает накладные расходы, связанные с навигацией по системе вложенных меню и подменю.
Рис. 1.5 Панель инструментов
Перечислим все элементы управления, расположенные на ней (слева направо).
- Code View (Режим разметки). Кнопка перехода в режим отображения исходной гипертекстовой разметки документа.
- Code and Design View (Режим разметки и планировки). Кнопка перехода в комбинированный режим работы, когда окно документа расщепляется на две части: в одной выводятся коды разметки, в другой отображается внешний вид гипертекстовой страницы.
- Design View (Режим планировки). Кнопка перехода в визуальный режим работы редактора - режим WYSIWYG.
- Title (Заголовок). Текстовое поле, предназначенное для ввода заголовка документа.
- File Management (Управление файлами). Кнопка открывает меню, содержащее файловые команды сетевого обмена и контроля обращения.
- Preview/Debug in Browser (Просмотр/отладка в броузере). Кнопка открывает меню с командами просмотра и отладки гипертекстового документа. Первые выполняют верификацию гипертекстовой разметки. Для этого они загружают документ в одну из установленных и связанных с системой Dreamweaver программ просмотра. Команды отладки проверяют работоспособность кодов языка JavaScript в выбранном броузере.
- Refresh Design View (Обновить страницу). По этой команде все изменения, сделанные в исходном тексте документа, переносятся в режим планировки. При этом выполняется проверка синтаксиса и интерпретация кодов. Корректные фрагменты отображаются на странице, ошибочные помечаются желтым цветом.
- Reference (Справка). Кнопка выводит на экран электронное справочное руководство, содержащее описание дескрипторов языка гипертекстовой разметки, конструкций иерархических стилевых спецификаций (CSS) и операторов языка JavaScript.
- Code Navigation (Навигация по кодам). Кнопка открывает доступ к меню с командами, управляющими отладкой встроенных программ, написанных на языке JavaScript.
- View Options (Параметры отображения). Кнопка открывает меню с командами, которые управляют визуализацией вспомогательных элементов окна документа. В это меню входят многие команды меню View (Вид) строки меню, а также команды, которые управляют представлением кодов.
Селектор разметки
В левой части строки состояния расположен селектор разметки (tag selector). Он представляет собой своеобразный индикатор, который показывает дескрипторы разметки HTML, окружающие текущую позицию курсора. Так, для любой пустой страницы селектор принимает значение
. Если набрать строчку текста и нажать клавишу ENTER, то появится дескриптор параграфа <р>. Если поместить курсор внутрь таблицы, селектор покажет дескрипторы