Самоучитель по Dreamweaver MX

       

Самоучитель по Dreamweaver MX

Macromedia Dreamweaver — достаточно "старый" пакет. Первая его версия была разработана еще в 1998 году и получила популярность в России благодаря своей "благосклонности" к русскому языку и снисходительному отношению к множеству русскоязычных кодировок. Я пользуюсь Dreamweaver, начиная с версии 2.0. В прошлом году я написал электронная книгау о предыдущей версии Dreamweaver — 4.0. Теперь же, с выходом Dreamweaver MX, я снова взялся за перо, так сказать.
Изучать Dreamweaver мы будем на конкретном примере. Мы будем делать личный Web-сайт гипотетического Web-дизайнера Ивана Ивановича Иванова. Сначала этот сайт будет совсем простеньким; на его основе мы изучим базовые инструменты программы и основные принципы Web-дизайна. Впоследствии сайт станет сложнее и красивее; мы будем использовать фреймы и таблицы, чтобы придать ему профессиональный вид. Далее мы изучим таблицы стилей, встроенные средства для анимации элементов страницы и сценарии, позволяющие "оживить" страницы нашего сайта. И на самой последней ступени мы изучим серверное программирование и сделаем для нашего сайта гостевую электронную книгу. Ну и, конечно же, мы узнаем, как собрать разрозненные страницы в сайт и опубликовать его в Сети.

Введение

Как сделать простейший Web-сайт
ак как же делаются те красивые Web-странички, которые выводит нам Web-обозреватель? И откуда они берутся? А вот я слышал в автобусе слово "WWW" и не знаю, что это такое... И вообще, что такое Интернет и почему мы его не видим, как, например, монитор или сообщения об ошибках Windows?

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

Создание обычных гиперссылок
А создаются они очень просто. И в этом — большая заслуга разработчиков Dreamweaver, сделавших продукт, реализующий просто даже весьма сложные задачи.
Но хватит петь дифирамбы Dreamweaver. Давайте попробуем его в настоящем деле! Вставим в текст нашей пока что единственной Web-страницы две гиперссылки, указывающие "вовне" нашего сайта: на "домашний" сайт фирмы Macromedia — создателя Dreamweaver и на почтовый адрес гипотетического Ивана Ивановича. Щелкнув по первой из них, пользователь сможет попасть на сайт, а щелкнув на второй — написать письмо Ивану Ивановичу. Второй ссылкой мы займемся чуть позже, а пока...

Web-страница сведений об авторе
Вы уже заметили — справа от поля ввода адреса находятся две кнопки. Одна из них имеет вид мишени и расположена левее; она нам сейчас бесполезна. Вторая гораздо интереснее: она имеет вид папки и при нажатии открывает диалоговое окно Select File, показанное на рис. 3.41. В верхней части этого окна находится список файлов текущей папки и раскрывающийся список выбора папок, совсем как в стандартном диалоговом окне открытия файлов Windows. Вы должны будете выбрать нужный файл Web-страницы, чтобы создать на нее гиперссылку. Так мы и сделаем. И не забудьте нажать кнопку ОК. Вот и все — гиперссылка создана.

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

Работа с Web-сайтом
Но сначала нужно создать еще одну Web-страницу — список ссылок на "дружественные" Web-сайты. Не будем особо мудрить и поместим на нее ссылку на "домашний" сайт Macromedia (рис. 6.1). Отойдем от нашей обычной системы именования файлов Web-страниц и сохраним полученный файл под именем Links.htm.

Свойства наборов фреймов
Для того чтобы задать свойства наборов фреймов и отдельных фреймов, нужно сначала выбрать один из них. Лучше всего это проделывать в панели Frames. Изначально она отсутствует в доке, поэтому выберите пункт Frames в подменю Others меню Window или нажмите комбинацию клавиш +.

Табличный дизайн
Сейчас мы будем изучать принципы табличного дизайна — одного из способов создания сложных Web-страниц с использованием таблиц HTML. И, естественно, рассмотрим все возможности, предлагаемые Dreamweaver Web-дизайнерам, связавшим свою профессиональную судьбу с таблицами.

Использование шаблонов
Представим себе такую ситуацию. Мы вдруг решили добавить в наш сайт новую страницу. Чтобы это сделать, нам нужно изменить полосу навигации во всех страницах, а для этого придется открыть каждую из них в окне документа, добавить ссылку и сохранить страницу. Наш сайт невелик по размеру, и мы выполним эту работу довольно быстро. А если бы он был велик?

Каскадные таблицы стилей
WWW была создана учеными как средство для обмена текстовыми документами, a HTML был языком, с помощью которого создавали эти документы. Для ученых главным было содержимое документа, а не его оформление. Поэтому первые версии HTML не включали даже средств для размещения на Web-страницах графических изображений, не то что для сложного форматирования текста. Но время шло, и в Интернет пришел обыватель, тотчас потребовавший от Web-дизайнеров "сделать ему красиво". А Web-дизайнеры, в свою очередь, потребовали от разработчиков стандарта HTML средств, облегчающих им работу.

Работа с группой свободно позиционируемых элементов
Чтобы выделить сразу несколько свободных элементов, поступите следующим образом. Сначала выделите один из них, щелкнув на нем мышью (выделен сам элемент или его граница — значения не имеет). После этого щелкните на границах всех остальных элементов, удерживая нажатой клавишу . Все элементы, по границам которых вы щелкнули, будут выделены. Заметьте, что маркеры изменения размеров всех этих элементов, кроме того, на котором вы щелкнули в последнюю очередь, будут иметь вид белых, а не черных квадратов

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

Использование сценариев
Как вы уже знаете, Web-сценарии позволяют преодолеть ограничение HTML, обусловленное его природой языка разметки страницы. Это ограничение заключается в том, что с помощью HTML можно описать только внешний вид данных, отображаемых на Web-странице, но никак не их поведение при наступлении того или иного события (о событиях и их обработке см. в главе 12). Говорят, что HTML — язык представления данных, но не описания способов их обработки.

Метатеги и серверные директивы
Метатеги позволят вам поместить в ваши Web-страницы дополнительные указания Web-обозревателю, Web-серверу и другим программам, о которых будет рассказано в дальнейшем. В частности, с помощью метатегов Dreamweaver задает текстовую кодировку, в которой созданы ваши страницы. Также с помощью метатегов вы можете сделать своим страницам неплохую рекламу на просторах Сети... Да-да, и здесь реклама! А куда же без нее...

Зачем нужны серверные программы
Мы, вроде бы, научились создавать Web-страницы в среде Dreamweaver. Мы даже научились создавать с его помощью целые Web-сайты и публиковать их на Web-сервере. Мы изучили две разновидности дизайна страниц: фреймовый, когда сайты строятся на основе наборов фреймов, и табличный, когда содержимое страницы помещается в большую сложную таблицу. Мы познакомились с таблицами стилей, метатегами и серверными директивами. И, наконец, узнали о Web-программировании и Web-сценариях, позволяющих добавить "жизни" нашим статичным страничкам. Что же еще надо для счастья?

Список
Web-формы — такой же часто встречающийся элемент страниц, как, скажем, графические изображения или таблицы. Очень и очень многие сайты содержат анкеты для опроса посетителей. Почтовые системы, работающие через Web-обозреватель ("Web-почта"), спрашивают у вас кодовое имя (или, как говорят опытные интернетчики, "логин", по-английски — login) и пароль прежде, чем допустить к содержимому вашего почтового ящика. Разнообразные сайты-справочники предусматривают возможности поиска, для чего предоставляют специальные формы с полем ввода, где вы должны будете ввести ключевое слово. А электронные магазины требуют у вас почтовый адрес, чтобы отправить вам купленный товар.

Простейшие серверные приложения
Мы полны сил. Нами движут лучшие помыслы. Наш Dreamweaver рвется в бой. Наш Web-сервер установлен и правильно настроен. (О том, как настраивать Microsoft Personal Web Server и Internet Information Server, читайте в поставляемой с ними документации.) Наш "статичный" Web-сайт давно работает и пользуется огромной популярностью. Наш кофе давно сварен и медленно остывает в чашке. Все готово к тому, чтобы сделать первый шаг в серверное программирование.

Создание интерактивных сайтов
Создание интерактивных Web-сайтов - высший пилотаж Web-дизайна. Чтобы сделать такой сайт, Web-дизайнер не только должен владеть языком HTML и обладать художественным чутьем, но и просто обязан знать "классическое" программирование и разбираться в базах данных. Конечно, современные программные продукты, наподобие Macromedia Dreamweaver, значительно облегчают труд Web-дизайнера, но отнюдь не берут всю его работу на себя. Уже говорилось, что Web-дизайн, как и "классическое" программирование — не наука, а искусство, иначе и программистов, и Web-дизайнеров давно бы уже заменили роботами. Или программами типа Dreamweaver.

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