Основные принципы работы с Dreamweaver

Размещено на http://www.allbest.ru/

Введение

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

Можно выделить следующие классификации веб-документов: по возможности изменения содержания и структуры - статические (трудоемкое и неудобное обновление) и динамические (более простое и быстрое обновление); по наличию обратной связи - пассивные (пользователь имеет возможность лишь просматривать информацию) и активные (пользователь имеет возможность обмениваться данными с сервером, участвовать в интерактивном диалоге).

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

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



1. Основные принципы работы с DREAMWEAVER

1.1 Главное окно программы

Главное (или основное) окно программы Macromedia Dreamweaver MX показано на рисунке 1

Рисунок 1 Главное окно Dreamweaver

Dreamweaver -- программа с многодокументным интерфейсом или просто многодокументная программа. Это значит, что вы можете открыть в одном и том же окне программы сразу несколько документов. В этом случае окна, содержащие открытые документы, открываются внутри большого окна самой программы[12]. А программы с одно документным интерфейсом (одно документные программы) могут открыть только один документ; чтобы открыть второй, нужно запустить вторую копию программы. Главное окно служит "вместилищем" для превеликого множества других окон, содержащих как открытые Web-страницы, так и различные инструменты, предназначенные для работы с ними. Также в главном окне находится строка главного меню, с помощью которого вы сможете получить доступ ко всем возможностям Dreamweaver[5].

Окно документа Dreamweaver служит для отображения открытой Web-страницы (на рисунке 1 вы можете видеть, что в Dreamweaver открыта одна из наших первых Web-страничек). Как и любая другая многодокументная программа, Dreamweaver может открыть в главном окне сколько угодно окон документов. Вы можете перемещать, свертывать и развертывать эти окна и изменять их размеры, в общем, проделывать с ним те же манипуляции, что и с любым другим окном Windows. Единственное исключение: вы не можете "вытащить" ни одно из этих окон за пределы главного окна программы (его еще называют родительским окном). Надо сказать, что при первом запуске Dreamweaver MX выводит на экран еще одно небольшое окно -- так называемое окно-приглашение. Это окно содержит текст рекламного характера, предлагающий пользователю прочитать некоторые справочные данные или запустить интерактивные презентации, объясняющие, как работать в Dreamweaver. Вы можете просмотреть их или сразу же закрыть это окно, щелкнув кнопку закрытия. При последующих запусках окно-приглашение появляться больше не будет[17]. Выше, ниже и правее окна документа находятся панели. Это небольшие окна, которые могут быть либо "приклеены" к одному краю главного окна, либо свободно "плавать" рядом с ним. Они предназначены для самых разных целей. В верхней части каждой панели имеется ее заголовок -- темно-серая полоса, на которой написано название панели. Изначально все панели, имеющиеся на экране, "приклеены" к какому-либо краю главного (родительского) окна программы Разработчики из фирмы. Macromedia считают, что так будет удобно большинству пользователей Dreamweaver, и, похоже, они правы. Однако вы можете придерживаться иного мнения. Поэтому и здесь существует возможность отделить какую-либо панель от края родительского окна и превратить ее в отдельное окно (рисунок 2) (так называемая "плавающая" панель). Для этого каждая панель имеет "ручку" для ее "переноски", находящуюся в левой части заголовка панели и выглядящую как пять темных точек. Ну и, конечно можно присоединить панель обратно к краю главного окна, чтобы она не загораживала документ[4].

Рисунок 2 Панель, отделенная от края родительского окна

"Отклеенная" от края главного окна панель может быть перемещена в любое место экрана, даже за пределы главного окна программы. Перетаскивать такую панель можно как за ее "ручку", так и за заголовок ее окна. Кроме того, можно изменять размеры окон панелей (многих, но не всех). Если перетащить одну панель на другую, то эти панели будут объединены в общую группу панелей, занимающую одно окно (рисунок 3). Такие группы можно также "приклеивать" к краю главного окна программы. (Если посмотреть на рисунок 1 то можно увидеть несколько групп панелей, "приклеенных" к краю главного окна.) Рекомендуется объединять в одну группу панели, выполняющие сходные функции[15].

Рисунок 3 Панели, объединенные в группу

Все панели, находящиеся в группе, представлены в виде вкладок. Чтобы переключиться на нужную панель в группе, щелкните мышью вкладку, на которой написано название этой панели. Если вынести какую-либо панель из такой группы, надо щелкнуть правой кнопкой мыши по соответствующей вкладке, выбрать пункт Group <название панели> with и в появившемся на экране подменю -- пункт New Panel Group[4].

Чтобы временно уменьшить площадь, занимаемую "плавающей" панелью (фактически, группой панелей), можно ее "сжать", чтобы на экране остался только заголовок (рисунок 4). Для этого нужно щелкнуть по названию панели, находящемуся в ее заголовке. Чтобы "развернуть" панель до обычного состояния, снова щелкните по ее заголовку[4].

Рисунок 4 "Сжатое" окно панели

Большинство групп панелей имеют так называемое дополнительное меню. Оно открывается при щелчке мышью по небольшой кнопке, расположенной в правом верхнем углу панели и имеющей изображение списка из трех позиций и небольшой стрелки, направленной вниз (рисунок 5). В дополнительном меню находятся пункты, выполняющие редко используемые команды. Также в Dreamweaver MX уже есть знакомое подменю Group <название панели> with[16].

Рисунок 5 Дополнительное меню группы панелей (открыто)

В правом краю главного окна находится настоящее сборище всяческих панелей. Это так называемый док -- область, специально предназначенная для помещения на нее панелей. Док отделен от остального пространства главного окна толстой серой полосой, которую можно перетаскивать мышью, изменяя размеры дока. Также можно щелкать мышью довольно приметную кнопку (рисунок 6), чтобы быстро скрыть док со всеми его панелями или открыть его снова. Это настоящая находка программистов фирмы Macromedia; благодаря ей, пользоваться Dreamweaver стало намного удобнее[16].

Рисунок 6 Кнопка скрытия-раскрытия дока

Панели всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы можно было всегда получить к ним доступ, вне зависимости от того, какое окно сейчас активно. Если надо убрать какую-либо из этих панелей, "вынесите" ее за пределы окна документа или вообще закройте, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. В дальнейшем можно открыть нужную панель, выбрав соответствующий пункт меню Window[14].

Когда окно программы Dreamweaver перестает быть активным (например, когда пользователь переключается в другую программу), все "плавающие" панели временно скрываются. При активизации Dreamweaver они опять появляются на экране.

Как правило, все панели Dreamweaver имеют примерно одинаковые возможности (но, конечно, разное назначение). Но две из них стоят особняком.

Первая из них -- это панель объектов, показанная в "плавающем" виде на рисунке 2 (она носит название Insert). Эта панель служит для быстрой вставки в документ различных элементов[22]:

· рисунков;

· таблиц;

· специальных символов;

· расширений Web-обозревателя и пр.

Также она служит для переключения режимов работы окна документа. Панель объектов содержит множество вкладок, между которыми можно переключаться, -- это способ сделать ее чуть более вместительной.

Если в данный момент времени панель объектов не нужна, можно закрыть ее, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. Чтобы открыть ее впоследствии, нужно выбрать в меню Windows пункт Insert или нажаьб комбинацию клавиш <Ctrl>+<F2>.

Вторая панель, имеющая заголовок Properties, -- это редактор свойств (рисунок 7), один из важнейших инструментов Dreamweaver. Редактор свойств служит для задания параметров того или иного элемента Web-страницы (фактически -- значений атрибутов соответствующего HTML-тега). Если панель объектов можно со спокойной душой закрыть, чтобы освободить место на экране, и использовать для вставки элементов страницы пункты меню главного окна, то редактор свойств будет нужен всегда. Поэтому его надо держать под рукой. Если его все же случайно закрыть, то надо выбрать в меню Windows пункт Properties или нажать комбинацию клавиш <Ctrl>+<F3>[22].

Рисунок 7 Редактор свойств

Редактор свойств можно переключить в компактный или полный вид. Изначально он находится в компактном виде, не показывая некоторых, малоиспользуемых, с точки зрения разработчиков Dreamweaver, свойств. Его сразу же надо развернуть, для чего щелкните мышью по кнопке, имеющей вид стрелки, направленной вниз, -- она расположена в правом нижнем углу панели. После этого редактор свойств покажет вам все доступные свойства. (На рисунке 1 редактор свойств находится как раз в развернутом виде.) При этом кнопка развертывания изменит вид на стрелку вверх, и при щелчке на ней, можно наоборот, свернкть редактор свойств.

В верхнем краю главного окна, туда, где находится панель объектов, выше или ниже ее можно увидеть узкую серую панельку, заполненную кнопками (рисунок 8). Это один из инструментариев Dreamweaver. Инструментарий -- особая панель, лишенная многих возможностей обычных панелей и предназначенная только для того, чтобы предоставить быстрый доступ к некоторым часто используемым операциям. Таких инструментариев в Dreamweaver два[19]:

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

· документа, позволяющий выполнять некоторые манипуляции с открытой Web-страницей и самой программой, виден на рисунке 8.

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

Рисунок 8 Инструментарий документа

1.2 Управление окнами и панелями Dreamweaver

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

Если открыть несколько Web-страниц, разобраться в них может быть очень трудно. Окна перекрывают друг друга, и добраться до нужного окна удается далеко не сразу. Надо открыть подменю Window и посмотреть его нижнюю часть. Там будут находиться пункты, имеющие имена, схожие с именами файлов открытых страниц. Для того чтобы переключиться в окно, где открыт нужный файл, просто нужно выбрать соответствующий пункт. Dreamweaver тотчас выведет это окно на первый план, т. е. активизирует его.

Если же раскрыть одно из окон документов на весь экран (точнее, на все главное окно), то переключаться между окнами станет еще проще. В этом случае все открытые окна будут перечислены в нижней части окна документа в виде вкладок (рисунок 9) -- надо выбрать только необходимое[21].

Рисунок 9 Вкладки, обозначающие все открытые окна документа в раскрытом состоянии

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

Пункты Insert и Properties служат для вывода на экран или скрытия соответственно панели объектов и редактора свойств. Если слева от имени одного из этих пунктов стоит галочка, это значит, что соответствующая панель выведена на экран (или, как еще говорят, что соответствующий пункт меню "включен"). Чтобы убрать панель, снова надо выбрать нужный пункт -- и панель исчезнет вместе с галочкой. Такие пункты меню, меняющие свое состояние на противоположное при выборе, называют выключателями. Вместо выбора пунктов Insert и Properties можно нажать "горячие" комбинации клавиш <Ctrl>+<F2> и <Ctrl>+<F3> соответственно.

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

Если скрыть на время все панели, чтобы без помех просмотреть открытую Web-страницу, надо выбрать пункт Hide Panels в меню Window или одноименный пункт в меню View. Этот пункт работает как выключатель, т. е. при первом выборе он скрывает все панели, а при втором -- снова выводит их на экран. Также можно нажать клавишу <F4> -- это проще и быстрее, чем лезть в меню.

Каждая группа панелей имеет дополнительное меню. Кроме того, каждая отдельная панель имеет контекстное меню, появляющееся при щелчке правой кнопкой мыши по нужной вкладке и содержащей те же пункты. Пользуясь пунктами этого меню, можно выполнить над данной группой или панелью различные манипуляции[24]:

· закрыть панель, выбрав пункт Close Panel Group;

· увеличить размеры панели так, чтобы она заняла весь экран компьютера по вертикали, выбрав пункт Maximize Panel Group;

· поместить выбранную группу или отдельную панель в другую группу, выбрав пункт Group <название группы или панели> with и далее в появившемся на экране подменю -- пункт, соответствующий имени нужной группы панелей;

· переименовать группу, выбрав пункт Rename Panel Group. После этого нужно ввести новое имя в поле ввода Panel Group Name диалогового окна Rename Panel Group (рисунок 10) и нажать кнопку ОК для его сохранения или Cancel -- для отмены;

· поместить выбранную панель в новую группу, выбрав пункт Group <название группы или панели> with и далее в появившемся на экране подменю -- пункт New Panel Group;

· получить справку по этой панели, выбрав пункт Help.

· чтобы вывести на экран нужный инструментарий, надо выбрать соответствующий пункт-выключатель подменю Toolbars меню View. Всего таких пунктов два -- по числу инструментариев:

· пункт Standard выводит главный инструментарий;

· пункт Document выводит инструментарий документа.

Рисунок 10 Диалоговое окно Rename Panel Group

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

1.3 Три режима отображения Web-страницы

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

Но как получить доступ к HTML-коду? Ведь по умолчанию Dreamweaver предлагает вам редактировать Web-страницу в режиме WYSIWYG.

Как видно на инструментарии документа (лучше всего держать его открытым) слева видны три кнопки (рисунок 11). Они переключают три доступных режима отображения (перечислены в порядке справа налево)[28]:

· страница;

· страница и HTML-код;

· только HTML-код.

Рисунок 11 Кнопки переключения режимов отображения Web-страницы

На рисунке 11 крайняя правая кнопка нажата. Она включает режим отображения, предлагаемый Dreamweaver по умолчанию режим отображения страницы. В этом режиме можно работать с Web-страницей в режиме WYSIWYG.

Если нажать на среднюю кнопку, включающую режим отображения страницы и кода. На рисунке 12 показано, что из этого получится:[28]

Рисунок 12 Режим отображения страницы и кода

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

Рисунок 13 Режим отображения кода

Ну, а левая кнопка включает режим отображения кода (рисунок 13). Для переключения режимов отображения также можно воспользоваться пунктами Design, Code and Design и Code меню View, соответственно. При выборе одного из этих пунктов слева от его названия появляется галочка, показывающая, что данный пункт и, следовательно, данный режим включены. Такие пункты называются переключателями,

Кроме того, можно быстро переключаться между режимом отображения страницы и режимом кода, выбрав пункт Switch Views меню View или нажав комбинацию клавиш <Ctrl>+<'>.[20]

1.4 Работа с кодом HTML

Прежде всего, можно переключиться в режим отображения исходного кода HTML, нажав крайнюю левую кнопку из показанных на рисунке 14. Также можно воспользоваться пунктом Code или Switch View меню View.

Рисунок 14 Секция размера окна с открытым списком

Кроме того, создатели Dreamweaver предусмотрели возможность просмотра исходного HTML-кода в панели, называемой Code Inspector (рисунке 15). Чтобы вызвать ее на экран, надо выбрать в меню Window пункт Others и в появившемся на экране подменю -- пункт Code Inspector. Но проще всего нажать клавишу <F10>.

Во многих случаях этого хватает. Однако часто бывает нужно отредактировать фрагмент кода страницы, держа ее перед глазами. Для этого Dreamweaver предоставляет так называемый мини-редактор. HTML. Пользуясь мини-редактором, можно править атрибуты выбранного тега, вставлять код HTML в любое место текста -- и все это без переключения в режим отображения кода[23].

Рисунок 15 Панель Code Inspector

Пусть, например, нужно немного поправить значения атрибутов какого-либо тега. Для этого нужно поставить текстовый курсор в его содержимое и выбрать в контекстном меню пункт Edit Tag Code <тег>. На экране появится окно мини-редактора, показанное на рисунке 16. Надо ввести в него нужный код и нажмите клавишу <Enter>, чтобы Dreamweaver принял все изменения, или <Esc>, чтобы отказаться от них.

Рисунок 16 Окно мини-редактора HTML

Как видно, окно мини-редактора позволяет вам править только теги, а не их содержимое. Исправить содержимое тегов можно и в окне документа.

Если нужно вставить в текст Web-страницы какой-либо тег с содержимым, надо поставить в это место текстовый курсор и выбрать в контекстном меню пункт Insert Tag. На экране также появится окно мини-редактора, на этот раз пустое (рисунок 17).

А список, в котором перечислены непонятные слова это одна из замечательных возможностей, появившаяся в Dreamweaver MX -- подсказка по коду. Как только поставить где-либо в коде HTML значок <, как Dreamweaver отобразит список, в котором перечислены все теги HTML. Если нажать на клавиатуре какую-либо буквенную клавишу, в списке появятся только теги, начинающиеся на эту букву. Чтобы выбрать нужный тег в списке, нужно выделить его и нажать клавишу <Enter> или просто щелкнуть по нему мышью[13].

Рисунок 17 Окно мини-редактора при вставке нового тега

В окно мини-редактора весь код, который надо вставить (рисунок 18), и нажать клавишу <Enter>. Он будет помещен на то самое место, где стоит текстовый курсор.

Рисунок 18 Окно мини - редактора с новым кодом HTML, который будет вставлен в страницу

Теперь можно "завернуть" любой выделенный фрагмент текста в тег HTML. Для этого надо выделить нужный текст и выбрать в контекстном меню пункт Wrap Tag. Надо ввести в появившемся окне нужный тег со всеми нужными атрибутами и нажать клавишу <Enter>.

Чтобы удалить тег, в который "завернут" какой-либо фрагмент текста, надо поставить в него текстовый курсор и выбрать в контекстном меню пункт Remove Tag <тег>. Dreamweaver удалит этот тег, но оставит его содержимое, которое "вольется" в содержимое родительского тега[11].

В диалоговом окне правки тега надо выделить целиком содержимое какого-либо тега, воспользовавшись секцией тегов строки статуса. После этого нужно выбрать пункт Edit Tag <тег>. На экране появится диалоговое окно, показанное на рисунке 19.

Рисунок 19 Диалоговое окно правки тега

Пользуясь этим окном и своим знанием английского, можно в удобной форме задавать значения различных атрибутов выбранного тега. В левом списке надо выбрать одну из категорий атрибутов, и в правой части окна появятся соответствующие элементы управления. Также можно щелкнуть "потайную" кнопку Tag Info, выглядящую как обычная надпись, после чего в окне правки тега появится краткая подсказка по выбранному тегу. Закончив правку, нужно нажать кнопку ОК, чтобы сохранить все изменения, или кнопку Cancel, чтобы отказаться от них[23].

Если нужно исправить тег, держа страницу перед глазами, или просто не любите лишние диалоговые окна, можно воспользоваться панелью Tag Inspector. Чтобы вызвать ее на экран (если ее еще нет на экране), необходимо выбрать пункт Tag Inspector в меню Window или просто нажав клавишу <F9>. Сама эта панель показана на рисунке 20.

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

Если нажать расположенную в правом нижнем углу панели Tag Inspector кнопку Edit <тег> Tag, то, вызовется уже знакомое вам диалоговое окно правки тега. Эта кнопка показана на рисунок 21.

Рисунок 20 Панель Tag Inspector

Рисунок 21 Кнопка Edit <тег> Tag

Рисунок 22 Кнопка Tag Chooser

С помощью другого диалогового окна можно поместить на страницу какой-либо тег или "завернуть" в него выделенный фрагмент текста. Для этого служит диалоговое окно Tag Chooser. Чтобы его вызвать, нужно выполнить одно из следующих действий[26]:

· выбрать пункт Tag меню Insert или нажать комбинацию клавиш <Ctrl>+<E>;

· выбрать пункт Insert Tag контекстного меню окна документа (действует только тогда, когда окно документа находится в режиме отображения HTML-кода);

· нажать кнопку Tag Chooser, находящуюся на вкладке Common панели объектов (рисунок 22).

Само окно Tag Chooser показано на рисунок 23.

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

Рисунок 23 Диалоговое окно Tag Chooser

Сразу после нажатия кнопки Insert на экране появится уже знакомое диалоговое окно правки тега, в котором можно задать значения атрибутов выбранного тега. Сам тег будет вставлен только после нажатия кнопки ОК окна правки тега. Заодно Dreamweaver сам переключит окно документа в режим отображения страницы и кода, чтобы можно было видеть, где вставленный тег начинается и где он заканчивается[29].

Если щелкнуть по кнопке Tag Info диалогового окна Tag Chooser, в этом окне появится краткое описание выбранного тега. Учтите, что при этом оба списка "съежатся", чтобы освободить место.

Если перед вызовом окна Tag Chooser выделить какой-либо фрагмент текста вместо того, чтобы просто поставить в какое-то его место текстовый курсор, то выделенный текст будет "завернут" во вновь вставленный тег.

После вставки любого тега окно Tag Chooser останется на экране, так что можно сразу же вставить новый тег.



2. Работа с текстом в среде DREAMWEAVER MX

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

Нужно выбрать пункт New в меню File или нажать комбинацию клавиш <Ctrl>+<N>. После этого появится диалоговое окно New Document (рисунок 24).

Dreamweaver MX поддерживает создание Web-страниц на основе шаблонов. Шаблон -- это особым образом подготовленная и сохраненная Web-страница, на которой уже имеются некоторые элементы, которые вам могут понадобиться (сведения об авторских правах, название и т. п.). Для этого останется только добавить основной текст и немного исправить оформление -- и готовая профессионально оформленная страница руках. Если нужно быстренько "сляпать" страничку с каким-то текстом, шаблоны -- настоящая находка.

На рисунке 24 видно, что слева расположен список Category, где можно выбрать категорию шаблонов. Сами шаблоны, относящиеся к выбранной категории, перечислены в списке Basic Page. А внешний вид выбранного шаблона во многих случаях можно просмотреть в расположенной справа панели предварительного просмотра[26].

Рисунок 24 Диалоговое окно New Document

Чтобы создать "пустой" шаблон. Выберем в списке Category пункт Basic Page, а в списке Basic Page -- пункт HTML, после чего нажмем кнопку ОК. На экране появится пустое окно документа. Новая Web-страница создана.[26]

2.2 Ввод текста

Для начала наберем произвольный текст в окне документа Dreamweaver (рисунок 25).

Набрав текст, сохраним его в файле под именем 3.1.htm. И поместим его в отдельную папку -- так будет проще управляться со всем нашим Web-хозяйством.

Рисунок 25 Наш первый текст

Одна из Web-страниц на Web-сервере задается в качестве страницы по умолчанию. Также такая страница обычно носит имя default или index (и расширение htm или html). Но в данном случае пренебрежем этим соглашением, хотя первая страница так и просится быть страницей по умолчанию. Назовем ее 3.1.htm -- таким образом, не запутаемся в дальнейшем во множестве разнокалиберных страниц. Итак, когда создали первую нашу Web-страницу. Название, задаваемое тегом <TITLE>, которое не отображается в окне Web-обозревателя, но выводится в его заголовке. Кроме того, это название помещается в списке "истории" Web-обозревателя, где содержатся названия и адреса всех посещенных в течение некоторого времени страниц. Зададим его для удобства, тем более что это делается очень просто: наберите его в поле ввода, находящемся в инструментарии документа (рисунок 26)[22].

Рисунок 26 Поле ввода названия Web-страницы в инструментарии документа

2.3 Форматирование абзацев

Для начала нужно сделать странице нормальный "кричащий" заголовок. (Имеется в виду не HTML-заголовок, а обычный заголовок, как у газеты.) Первой строкой как раз набрано "Здравствуйте" Чтобы отформатировать текстовый абзац как заголовок, нужно воспользоваться редактором свойств, точнее, раскрывающимся списком форматов абзаца. Он показан на рисунке 27.

Пункт Paragraph этого списка форматирует текст как обычный абзац (отмечаемый тегом <Р>). Пункты Heading 1,..., Heading 6 позволяют превратить его в заголовок, соответственно, первого, второго уровня и т. д. Пункт Preformatted превращает абзац в текст фиксированного формата, где форматирование задано не тегами HTML, а как в обычном тексте: отступы создаются пробелами, а разбиение на абзацы -- символами возврата каретки и перевода строки. Это может быть очень полезно при выкладывании в Сеть больших текстовых документов, созданных в старых текстовых редакторах, без сложного HTML-форматирования[25].

Рисунок 27 Раскрывающийся список форматов абзаца, находящийся в редакторе свойств

Рисунок 28 Созданный заголовок

Примечание:

Заголовки создаются парными тегами <нп>, где л -- число от 1 до 6. Текст фиксированного формата задается парным тегом <PRE>.

Поставим текстовый курсор на строку "Здравствуйте" и выберем в меню форматов пункт Heading 1 -- это наилучшим образом подходит для приветствия. Получившийся результат показан на рисунке 28.

Если закрыть редактор свойств, не беспокойтесь -- то же самое можно сделать, используя главное меню или контекстное меню окна документа. В первом случае надо выбрать в меню Text пункт Paragraph Format и в появившемся на экране подменю -- нужный формат абзаца. Во втором случае щелкнуть правой кнопкой мыши на строке приветствия, также выбрать пункт Paragraph Format и в подменю -- формат абзаца.

Если же предпочитаете не отрывать пальцы от клавиатуры, можно задать формат заголовка комбинацией клавиш <Ctrl>+<n>, где <n> -- одна из клавиш <1>,..., <6>. Формат обычного абзаца можно задать, нажав комбинацию клавиш <Ctrl>+<Shift>+<P>.

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

Рисунок 29 Кнопки выравнивания, расположенные в редакторе свойств

Эти кнопки задают выравнивание соответственно (порядок перечисления слева направо)[17]:

· по левому краю;

· по центру;

· по правому краю;

· выравнивание по обоим краям (полное выравнивание).

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

Итак, снова установим текстовый курсор на заголовок и нажмем кнопку выравнивания по центру. На рисунке 30 показано, что получится в этом случае.

Рисунок 30 Центрированный заголовок

Аналогичного результата можно достигнуть, воспользовавшись подменю Align меню Text или аналогичным подменю контекстного меню. Пункт-переключатель Left задает выравнивание по левому краю, Center -- по центру, Right -- по правому краю, a Justify -- полное выравнивание. Также можнл нажать комбинацию клавиш <Сtrl>+<Аll>+<Shift>+<клавиша>, где <клавиша> -- <L>, <C>, <R> или <J>, соответственно[17].

Примечание:

Выравнивание задается значением атрибута ALIGN тегов <р> и <Hn>. Доступны значения left, center, right или justify.

Теперь можно выделить последнюю строку со сведениями об авторских правах. Можно поставить текстовый курсор в ее начало и нажать клавишу <Enter>, чтобы вставить между этой строкой и остальным текстом дополнительную пустую строку. А можно поступить по-другому.

Взгляните на кнопки, показанные на рисунке 31 Эти кнопки позволяют установить или убрать отступ слева у абзаца. Левая кнопка уменьшает (убирает) отступ, а правая -- увеличивает.

Рисунок 31 Кнопки задания отступа абзаца, находящиеся в редакторе свойств

Далее поставим курсор мыши на последнюю строку текста и нажмем кнопку увеличения отступа. Результат показан на рисунке 32.

Рисунок 32 Строка с отступом

Примечание:

Отступ задается парным тегом <BLOCKQUOTE>.

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

Для этого, прежде всего, надо выделить все строки, которые войдут в список. Всего их три.

Для того чтобы преобразовать выделенные строки в список, опять воспользуемся кнопками редактора свойств. Они показаны на рисунке 33. Левая кнопка создает маркированный список, а правая -- нумерованный. В данный момент времени может быть нажата только одна кнопка либо ни одной; в последнем случае абзац возвращается к своему обычному виду.

Рисунок 33 Кнопки создания списков, расположенные в редакторе свойств

Нажав левую кнопку. Созданный маркированный список показан на рисунке 34.

Рисунок 34 Маркированный список

2.4 Форматирование отдельных символов

Все текстовые редакторы, например Microsoft Word или поставляемый в составе Windows WordPad, позволяют менять начертание и размер шрифта текста, делать его жирным, курсивным или подчеркнутым, а также менять его цвет. Все это доступно и в Dreamweaver. Нужно только иметь в виду, что возможности HTML по форматированию текста сильно ограничены существующими стандартами.

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

Рисунок 35 Кнопки изменения начертания шрифта

Соответственно, левая (В) кнопка позволяет сделать шрифт жирным, а правая (I) -- курсивным. Обе эти кнопки могут быть нажаты или отжаты независимо, т. е. текст может быть простым, жирным, курсивом или жирным курсивом.

Выделим слова "Иван Иванович Иванов" и нажмем кнопку В. Текст станет жирным. Теперь выделим полностью последнюю строку (со сведениями об авторских правах) и нажмем кнопку I. Последняя строка станет курсивной. Полученный результат можно увидеть на рисунке 36[30].

Рисунок 36 Жирный текст и курсивная строка

Вместо нажатия кнопки В можно выбрать пункт-выключатель Bold в подменю Style меню Text или контекстного меню. В том же подменю существует пункт Italic -- аналог кнопки /. Также можно нажимать комбинации клавиш <Ctrl>+<B> и <Ctrl>+<!> соответственно.

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

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

В отличие от них, теги логического форматирования дают тексту, составляющему их содержимое, какое-либо дополнительное значение. Например, можно превратить с помощью одного из этих тегов фрагмент текста в цитату. Web-обозреватель выведет ее особым шрифтом (как правило, курсивом, хотя, может и вообще никак не выделить) и, вместе с тем, может выполнить какую-то дополнительную обработку этого текста, например, вывести все цитаты, встретившиеся в странице, в отдельное окно. (Правда, ни один современный Web-обозреватель так не делает, но кто знает, что будет дальше...)[25].

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

В подменю Style видно пункт-выключатель Strikethrough, включив который сделает выделенный фрагмент текста зачеркнутым. Зачеркивание текста выполняется опять же с помощью тега физического форматирования

А остальные пункты подменю Style задают именно логическое форматирование. В таблице 1 приведены все эти пункты и их краткие описания, а на рисунке 37 -- примеры текста, отформатированные с использованием соответствующих пунктов этого подменю[23].

Таблица 1

Пункты логического форматирования подменю Style

Пункт	Описание
Teletype	Текст, выведенный устройством вывода компьютера ("телетайп")
Emphasis	Важный текст
Strong	Очень важный текст. Имеет большее значение, чем текст, отформатированный через Emphasis
Code	Используется для обозначения в тексте фрагментов исходного кода программы на каком-либо языке программирования (команд, имен переменных, ключевых слов и т. п.)
Variable	Используется для обозначения в тексте имен переменных программы на каком-либо языке программирования
Sample	Вывод какой-либо программы
Keyboard	Текст, который пользователь должен ввести с клавиатуры
Citation	Цитата
Definition	Термин, встречающийся в тексте первый раз

Рисунок 37 Примеры различного форматирования текста с помощью пунктов подменю Style

В таблице 2 перечислены теги, вставляемые в HTML-код пунктами подменю Style.

Таблица 2

Теги, вставляемые в HTML-код пунктами подменю Style

Пункт	Пара тегов
Bold	<в>...</в>
Italic	...
Underline	<u>...</u>
Strikethrough	<s>...</s>
Teletype	<TT>...</TT>
Emphasis	<EM>...</EM>
Strong	<STRONG>...</STRONG>
Code	<CODE>...</CODE>
Variable	<VAR>...</VAR>
Sample	<SAMP>...</SAMP>
Keyboard	<KBD>...</KBD>
Citation	<CITE>...</CITE>
Definition	<DFN>...</DFN>

Можно задать шрифт, которым набран наш текст. Делается это с помощью двух раскрывающих списков, расположенных в редакторе свойств. Разумеется, Dreamweaver предоставляет в ваше распоряжение также соответствующие пункты меню и комбинации клавиш. Для смены шрифта используется раскрывающийся список, показанный на рисунок 38, а для смены размера шрифта-- список, показанный на рисунок 39. Но для того, чтобы понять, что же там отображается, нужно дать некоторые разъяснения.

Рисунок 38 Раскрывающийся список смены шрифта

Рисунок 39 Раскрывающийся список задания размера шрифта

2.5 Создание обычных гиперссылок

Вставим в текст пока что единственной Web-страницы две гиперссылки, указывающие "вовне" нашего сайта: на "домашний" сайт фирмы Macromedia -- создателя Dreamweaver и на почтовый адрес гипотетического Ивана Ивановича. Щелкнув по первой из них, пользователь сможет попасть на сайт http://www.macromedia.com, Выделим название фирмы Macromedia и обратим внимание на редактор свойств. Сразу заметим большое поле ввода интернет - адреса для гиперссылки (рисунок 40).

Рисунок 40 Поле ввода интернет-адреса в редакторе свойств

В появившемся окне Link, нужно ввести в него интернет-адрес сайта Macromedia и нажать клавишу <Entcr>. Результат появится сразу (рисунок 41). Теперь при просмотре в Web-обозревателе пользователь может просто щелкнуть мышью по слову "Macromedia", чтобы перейти на "домашний" сайт этой фирмы[28].

Заметили, что после вставки гиперссылки слово "Macromedia" изменило свой цвет на синий и стало подчеркнутым, хотя явно не задавали для него никакого HTML-форматирования. Дело в том, что, согласно стандарту HTML, текст-содержимое гиперссылок форматируется особым образом, чтобы его всегда можно было отличить от остального текста. И по умолчанию все ссылки, еще не посещенные пользователем, выделяются синим цветом[28].

Рисунок 41 Гиперссылка, указывающая на сайт Macromedia

Для создания гиперссылки из выделенного текста можно также воспользоваться пунктом Make Link меню Modify или контекстного меню или нажать комбинацию клавиш <Ctrl>+<L>. После этого на экране появится диалоговое окно Select File, показанное на рисунок 42. Нужный адрес вводится в поле ввода URL этого окна.

Рисунок 42 Диалоговое окно Select File

Просматривая рисунок 40 видно что справа от поля ввода интернет-адреса находятся две небольшие кнопки. Кнопка в виде мишени, находящаяся левее, кнопка в виде папки, находящаяся правее, позволит вам открыть то же самое диалоговое окно Select File[22].

Впоследствии можно изменить интернет-адрес гиперссылки. Для этого поставьте текстовый курсор на текст гиперссылки, измените адрес и нажмите кнопку <Enter>. Также можно воспользоваться пунктом Change Link меню Modify или контекстного меню или нажать комбинацию клавиш <Ctrl>+<L>. После этого на экране появится все то же незаменимое диалоговое окно Select File, в котором можно изменить интернет-адрес.

Для удаления гиперссылки и превращения ее содержимого в обычный текст воспользуйтесь пунктом Remove Link меню Modify или контекстного меню или нажать комбинацию клавиш <Ctrl>+<Shift>+<L>.

Например, мы можем сделать так, что при переходе на сайт Macromedia пользователь будет иметь возможность просматривать также и сайт Иванова. Как это сделать? Очень просто: откроем сайт Macromedia в новом окне Web-обозревателя.

Поставьте текстовый курсор где-нибудь в тексте гиперссылки и снова посмотрите на редактор свойств. На рисунке 43 показан раскрывающийся список задания цели гиперссылки[23].

Рисунок 43 Раскрывающийся список задания цели гиперссылки, расположенный в редакторе свойств

Этот список содержит четыре пункта, но полезными будут только два: _blank и _self. Первый из них позволит вывести страницу, на которую указывает гиперссылка, в новом окне Web-обозревателя, а второй -- в том же окне. (Вместо того чтобы выбирать второй пункт списка, можно просто оставить его содержимое пустым.) В данном случае нужно выбрать пункт _blank.

Для задания цели гиперссылки также можно воспользоваться подменю Link Target меню Modify или подменю Target Frame контекстного меню. Для этого надо выбрать нужный пункт-переключатель. Пункт Default Frame задает цель по умолчанию[19].

Примечание:

Гиперссылка создается с помощью парного тега <А>, внутри которого помещается текст. Этот тег содержит обязательный атрибут HREF, задающий интернет-адрес назначения. Кроме того, данный тег может включать атрибут TARGET, задающий цель гиперссылки.



3. Рисунки

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

Прежде всего, вставим готовый рисунок, который впоследствии поместим в страницу. Готовый рисунок, сохраним в файле Ivanov.gif.

Рисунок можно вставить сразу же после слова "Фотография". Поместим текстовый курсор в конце этого слова и посмотрим на вкладку Common панели объектов -- там находится кнопка Image (рисунок 44). Также можно воспользоваться пунктом Image меню Insert или нажать комбинацию клавиш <Ctrl>+<Shift>+<!>[24].

Рисунок44 Кнопка Image панели объектов

dreamweaver сайт документ редактор

Нажав эту кнопку. На экране появится диалоговое окно Select Image Source, показанное на рисунок 45.

Рисунок 45 Диалоговое окно Select Image Source

Раскрывающийся список папок и список файлов позволят выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (или можно вручную ввести его туда). А раскрывающийся список Тип файлов позволит вам выбрать, какой тип файлов можно найти. Все это знакомо по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие -- справа находится панель предварительного просмотра, где в данный момент видите физиономию Ивана Ивановича. Выбрали файл, где находится рисунок, и нажимаем кнопку ОК. После этого страница примет такой вид, как на рисунке 46[23].

Рисунок 46 Страница сведений с рисунком

Обратите внимание, что на правой и нижней границе портрета имеются небольшие черные квадратики. Это так называемые маркеры изменения размера. Любой маркер можно захватить мышью и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения. А если нужно, чтобы оба размера изменялись пропорционально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише <Shift>. Результат показан на рисунке 47[27].

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

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

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

Поля ввода V Space и Н Space задают соответственно вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю[6].

Поле ввода Src задает имя файла, где хранится графическое изображение. Справа от него видно уже знакомые две кнопки. Нажав на правую из них (с изображением папки), откроется диалоговое окно Select Image Source, показанное на рисунке 45.

Рисунок 47 Страница сведений после изменения размера рисунка

Рисунок 48 Вид редактора свойств, при выделенном изображении

Также можно изменить имя файла изображения, выбрав пункт Source File в контекстном меню или просто дважды щелкнув по изображению мышью. После этого на экране появится диалоговое окно Select Image Source.

Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое черновое изображение. Черновое изображение имеет меньший размер, как правило, за счет большего сжатия и низкого качества. Когда пользователь соединяется с Интернетом по низкоскоростному каналу, Web-обозреватель первым делом загружает "черновик", т. к. он имеет значительно меньший размер, и выводит его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается полноценное изображение и подменяет собой "черновик"[3].

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

Dreamweaver предоставляет другую возможность задать имя файла "черновика". Для этого нужно выбрать пункт Low Source в контекстном меню и указать нужный файл в появившемся на экране диалоговом окне Select Image Source.

Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения. По умолчанию она равна нулю, т. е. рамки нет.

Поле ввода Alt задает так называемый "альтернативный текст". Это придумано опять же для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображений, помещенных на ней, отобразит пустые рамки соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель отобразит небольшую подсказку, содержащую этот самый "альтернативный текст"[8].

Раскрывающийся список Align, позволяет задать выравнивание, а фактически -- относительное местоположение изображения и обтекающего его текста. Но сначала поговорим о том, как графические изображения размещаются на Web-странице.

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

Раскрывающийся список Align предоставляет Web-дизайнеру следующие пункты[13]:

· Browser Default -- расположение по умолчанию, обычно аналогично пункту Baseline;

· Baseline -- низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);

· Тор -- верх изображения совпадает с верхом текста;

· Middle -- середина изображения совпадает с базовой линией текста;

· Bottom -- низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);

· TextTop -- верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);

· Absolute Middle -- середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);

· Absolute Bottom -- низ изображения совпадает с низом самого низко сидящего символа текста;

...