Самоучитель по Dreamweaver MX
Самоучитель по Dreamweaver MX
Macromedia Dreamweaver — достаточно "старый" пакет. Первая его версия была разработана еще в 1998 году и получила популярность в России благодаря своей "благосклонности" к русскому языку и снисходительному отношению к множеству русскоязычных кодировок. Я пользуюсь Dreamweaver, начиная с версии 2.0. В прошлом году я написал электронная книгау о предыдущей версии Dreamweaver — 4.0. Теперь же, с выходом Dreamweaver MX, я снова взялся за перо, так сказать.Изучать Dreamweaver мы будем на конкретном примере. Мы будем делать личный Web-сайт гипотетического Web-дизайнера Ивана Ивановича Иванова. Сначала этот сайт будет совсем простеньким; на его основе мы изучим базовые инструменты программы и основные принципы Web-дизайна. Впоследствии сайт станет сложнее и красивее; мы будем использовать фреймы и таблицы, чтобы придать ему профессиональный вид. Далее мы изучим таблицы стилей, встроенные средства для анимации элементов страницы и сценарии, позволяющие "оживить" страницы нашего сайта. И на самой последней ступени мы изучим серверное программирование и сделаем для нашего сайта гостевую электронную книгу. Ну и, конечно же, мы узнаем, как собрать разрозненные страницы в сайт и опубликовать его в Сети.
Введение
Как сделать простейший Web-сайт
ак как же делаются те красивые Web-странички, которые выводит нам Web-обозреватель? И откуда они берутся? А вот я слышал в автобусе слово "WWW" и не знаю, что это такое... И вообще, что такое Интернет и почему мы его не видим, как, например, монитор или сообщения об ошибках Windows?
Как создаются Web-страницы
Что такое Интернет
Простейшая Web-страничка
Измененная Web-страничка
Гиперссылки
Два окна Web-обозревателя
Основные принципы работы с Dreamweaver
В этой главе мы рассмотрим начальные сведения о работе с Macromedia Dreamweaver MX. Вы узнаете, зачем нужны его многочисленные окна и инструменты, какие из них действительно вам понадобятся, а какие — нет. Также мы узнаем о начальных настройках этой программы, в частности, что нужно сделать, чтобы Dreamweaver поддерживал русский язык (изначально он не знаком с русским, т. к. по происхождению — американец). Все это вам нужно знать для того, чтобы потом, во время создания нашей первой Web-странички, не задавать лишних вопросов
Поиск и замена текста
Диалоговое окно Find and Replace
Диалоговое окно Find and Replace
Режим поиска тега
Панель Search
Использование регулярных выражений
Просмотр Web-страницы
Создание обычных гиперссылок
А создаются они очень просто. И в этом — большая заслуга разработчиков Dreamweaver, сделавших продукт, реализующий просто даже весьма сложные задачи.
Но хватит петь дифирамбы Dreamweaver. Давайте попробуем его в настоящем деле! Вставим в текст нашей пока что единственной Web-страницы две гиперссылки, указывающие "вовне" нашего сайта: на "домашний" сайт фирмы Macromedia — создателя Dreamweaver и на почтовый адрес гипотетического Ивана Ивановича. Щелкнув по первой из них, пользователь сможет попасть на сайт, а щелкнув на второй — написать письмо Ивану Ивановичу. Второй ссылкой мы займемся чуть позже, а пока...
Поле ввода интернет-адреса в редакторе свойств
Гиперссылка, указывающая на сайт Macromedia
Диалоговое окно Select File
Раскрывающийся список задания цели
Создание почтовых гиперссылок
Гиперссылка, указывающая на почтовый адрес
Кнопка Email Link панели объектов
Другие гиперссылки
Создание гиперссылок на РТР-серверы
Использование "якорей"
Web-страница сведений об авторе
Вы уже заметили — справа от поля ввода адреса находятся две кнопки. Одна из них имеет вид мишени и расположена левее; она нам сейчас бесполезна. Вторая гораздо интереснее: она имеет вид папки и при нажатии открывает диалоговое окно Select File, показанное на рис. 3.41. В верхней части этого окна находится список файлов текущей папки и раскрывающийся список выбора папок, совсем как в стандартном диалоговом окне открытия файлов Windows. Вы должны будете выбрать нужный файл Web-страницы, чтобы создать на нее гиперссылку. Так мы и сделаем. И не забудьте нажать кнопку ОК. Вот и все — гиперссылка создана.
Фоновые изображения
Web-страница с фоновым изображением
Мультимедиа
Поддержка мультимедийных данных
Модули расширения
Кнопка Plugin панели объектов
Модуль расширения
Таблицы
Если вам нужно поместить на ограниченном пространстве Web-страницы множество цифровых (и не только цифровых) данных, нет лучшего средства, чем таблица. Если вам необходимо создать красивый список, снова на помощь приходит таблица. Если вам требуется точно позиционировать текст и графику относительно друг друга, опять же незаменима таблица. Таблицы заполонили Web-документы. И немудрено: при нескольких не слишком значительных недостатках они обладают массой достоинств.
Параметры строки
Результат установки
Параметры таблицы
Вид редактора свойств при выделенной таблице
Перекрытие параметров таблицы ячейками
Кнопки управления значениями ширины и высоты
Предопределенные форматы таблиц
Диалоговое окно Format Table
Сортировка таблицы
Диалоговое окно Sort Table
Работа с Web-сайтом
Но сначала нужно создать еще одну Web-страницу — список ссылок на "дружественные" Web-сайты. Не будем особо мудрить и поместим на нее ссылку на "домашний" сайт Macromedia (рис. 6.1). Отойдем от нашей обычной системы именования файлов Web-страниц и сохраним полученный файл под именем Links.htm.
Настройка прокси-сервера или брандмауэра
Панель Site
Дерево" файлов, отображаемое в панели Site
Панель Site в расширенном виде
Кнопка Refresh инструментария панели Site
Диалоговое окно Edit Sites
Работа с файлами сайта
Диалоговое окно Update Files
Взаимодействие панели Site и окна документа
Свойства наборов фреймов
Для того чтобы задать свойства наборов фреймов и отдельных фреймов, нужно сначала выбрать один из них. Лучше всего это проделывать в панели Frames. Изначально она отсутствует в доке, поэтому выберите пункт Frames в подменю Others меню Window или нажмите комбинацию клавиш
Панель Frames
Вид редактора свойств при наборе фреймов
Свойства фреймов
Вид редактора свойств при выделенном фрейме
Замещение и работа с ним
Текст замещения
Создание содержимого фреймов
Заполнение фреймов
Табличный дизайн
Сейчас мы будем изучать принципы табличного дизайна — одного из способов создания сложных Web-страниц с использованием таблиц HTML. И, естественно, рассмотрим все возможности, предлагаемые Dreamweaver Web-дизайнерам, связавшим свою профессиональную судьбу с таблицами.
Форматирование таблиц и ячеек разметки
Параметры ячеек разметки
Выделенная ячейка разметки
Задание ширины ячеек
Диалоговое окно Choose Spacer Image
Обозначение "саморастягивающейся" ячейки
Меню строки ширин
Параметры таблицы разметки
Выделенная таблица разметки
Заполнение начальной страницы
Использование шаблонов
Представим себе такую ситуацию. Мы вдруг решили добавить в наш сайт новую страницу. Чтобы это сделать, нам нужно изменить полосу навигации во всех страницах, а для этого придется открыть каждую из них в окне документа, добавить ссылку и сохранить страницу. Наш сайт невелик по размеру, и мы выполним эту работу довольно быстро. А если бы он был велик?
Экспорт Web-страниц, основанных на шаблонах
Export Site Without Template Markup
Обновление страниц на основе шаблонов
Управление шаблонами в окне шаблонов
Кнопка Refresh Site List панели Assets
Новые возможности шаблонов
Изменяемые атрибуты
Диалоговое окно Editable Tag Attributes
Диалоговое окно добавления нового атрибута
Диалоговое окно Template Properties
Каскадные таблицы стилей
WWW была создана учеными как средство для обмена текстовыми документами, a HTML был языком, с помощью которого создавали эти документы. Для ученых главным было содержимое документа, а не его оформление. Поэтому первые версии HTML не включали даже средств для размещения на Web-страницах графических изображений, не то что для сложного форматирования текста. Но время шло, и в Интернет пришел обыватель, тотчас потребовавший от Web-дизайнеров "сделать ему красиво". А Web-дизайнеры, в свою очередь, потребовали от разработчиков стандарта HTML средств, облегчающих им работу.
Параметры шрифта
Комбинированный список Size
Параметры фона
Вкладка Background окна CSS Style Definition
Параметры абзаца
Вкладка Block окна CSS Style Definition
Параметры размеров и размещения
Работа с группой свободно позиционируемых элементов
Чтобы выделить сразу несколько свободных элементов, поступите следующим образом. Сначала выделите один из них, щелкнув на нем мышью (выделен сам элемент или его граница — значения не имеет). После этого щелкните на границах всех остальных элементов, удерживая нажатой клавишу
Группа свободно позиционируемых элементов
Группа позиционируемых элементов
Работа с позиционируемыми элементами
Панель Layers
Три свободно позиционируемых
Список панели Layers
Структуры свободно позиционируемых элементов
Пример использования элементов
Заголовок страницы Layers.htm
Анимация элементов Web-страниц
Одним из основных преимуществ свободно позиционируемых элементов является возможность управлять их местоположением, размером и видимостью с помощью специально написанных сценариев. Вы можете создавать простую анимацию на Web-страницах, заставляя свободно позиционируемые элементы перемещаться по заданным траекториям. Причем никакой модификации HTML-кода, кроме добавления соответствующих сценариев, не требуется (конечно, если соответствующие элементы на странице уже созданы).
Зачем нужна анимация
Создание анимации в Dreamweaver
Создание простейшей анимации
Панель Timelines
Комбинированный список анимаций
Предупреждение, выводимое Dreamweaver
Новая дорожка анимации
Маркер выделенного кадра
Использование сценариев
Как вы уже знаете, Web-сценарии позволяют преодолеть ограничение HTML, обусловленное его природой языка разметки страницы. Это ограничение заключается в том, что с помощью HTML можно описать только внешний вид данных, отображаемых на Web-странице, но никак не их поведение при наступлении того или иного события (о событиях и их обработке см. в главе 12). Говорят, что HTML — язык представления данных, но не описания способов их обработки.
Web-сценарии в Dreamweaver. Поведения
Работа с поведениями
Панель Behaviors
Панель Behaviors
Меню событий панели Behaviors
Диалоговое окно Play Timeline
Меню поведений панели Behaviors
Создание поведений
Вызов JavaScript-кода (CallJavaScript)
Метатеги и серверные директивы
Метатеги позволят вам поместить в ваши Web-страницы дополнительные указания Web-обозревателю, Web-серверу и другим программам, о которых будет рассказано в дальнейшем. В частности, с помощью метатегов Dreamweaver задает текстовую кодировку, в которой созданы ваши страницы. Также с помощью метатегов вы можете сделать своим страницам неплохую рекламу на просторах Сети... Да-да, и здесь реклама! А куда же без нее...
Базовый интернет-адрес
Диалоговое окно Base
Редактор свойств при выбранном метатеге
Перезагрузка
Кнопка Refresh панели объектов
Диалоговое окно Refresh
Связи между Web-страницами
Диалоговое окно Link
Редактор свойств при выбранном-метатеге связи
Специальные метатеги
Зачем нужны серверные программы
Мы, вроде бы, научились создавать Web-страницы в среде Dreamweaver. Мы даже научились создавать с его помощью целые Web-сайты и публиковать их на Web-сервере. Мы изучили две разновидности дизайна страниц: фреймовый, когда сайты строятся на основе наборов фреймов, и табличный, когда содержимое страницы помещается в большую сложную таблицу. Мы познакомились с таблицами стилей, метатегами и серверными директивами. И, наконец, узнали о Web-программировании и Web-сценариях, позволяющих добавить "жизни" нашим статичным страничкам. Что же еще надо для счастья?
Как Web-сервер обрабатывает данные
Как Web-обозреватель отправляет данные
Как данные передаются по Сети
Список
Web-формы — такой же часто встречающийся элемент страниц, как, скажем, графические изображения или таблицы. Очень и очень многие сайты содержат анкеты для опроса посетителей. Почтовые системы, работающие через Web-обозреватель ("Web-почта"), спрашивают у вас кодовое имя (или, как говорят опытные интернетчики, "логин", по-английски — login) и пароль прежде, чем допустить к содержимому вашего почтового ящика. Разнообразные сайты-справочники предусматривают возможности поиска, для чего предоставляют специальные формы с полем ввода, где вы должны будете ввести ключевое слово. А электронные магазины требуют у вас почтовый адрес, чтобы отправить вам купленный товар.
Вид редактора свойств при выделенном списке
Диалоговое окно List Values
Поле ввода имени файла
Кнопка File Field панели объектов
Поле ввода имени файла
Графическая кнопка
Свойства графической кнопки
Скрытое (невидимое) поле
Скрытое поле
Дополнительные элементы управления
Простейшие серверные приложения
Мы полны сил. Нами движут лучшие помыслы. Наш Dreamweaver рвется в бой. Наш Web-сервер установлен и правильно настроен. (О том, как настраивать Microsoft Personal Web Server и Internet Information Server, читайте в поставляемой с ними документации.) Наш "статичный" Web-сайт давно работает и пользуется огромной популярностью. Наш кофе давно сварен и медленно остывает в чашке. Все готово к тому, чтобы сделать первый шаг в серверное программирование.
Страница, отображающая данные
Кнопка Dynamic Text панели объектов
Поле Content таблицы Guestbook
Создание навигатора
Готовая страница Guestbook.asp с навигатором
Создание строки статуса набора данных
Готовая страница с навигатором
Страница для нескольких записей
Привязка элементов управления к данным
Создание интерактивных сайтов
Создание интерактивных Web-сайтов - высший пилотаж Web-дизайна. Чтобы сделать такой сайт, Web-дизайнер не только должен владеть языком HTML и обладать художественным чутьем, но и просто обязан знать "классическое" программирование и разбираться в базах данных. Конечно, современные программные продукты, наподобие Macromedia Dreamweaver, значительно облегчают труд Web-дизайнера, но отнюдь не берут всю его работу на себя. Уже говорилось, что Web-дизайн, как и "классическое" программирование — не наука, а искусство, иначе и программистов, и Web-дизайнеров давно бы уже заменили роботами. Или программами типа Dreamweaver.
Защита страниц от несанкционированного доступа
Реализация выхода с сайта
Страницы общего доступа
Страница списка категорий
Страница списка высказываний
Страница регистрации посетителя
Реализация поиска высказываний
Принципы создания интерактивных сайтов
Заключение
Я рассказал об этой программе все, что знал и что мог найти в поставляемой с ним электронной документации и других информационных ресурсах. Я поделился своими соображениями насчет принципов Web-дизайна и различных интернет-технологий, еще современных и уже устаревших. Вы были озадачены огромным количеством новых терминов, имеющих хождение среди интернетчиков и Web-дизайнеров. Я продемонстрировал вам множество фрагментов исходного кода на HTML и JavaScript и дал множество полезных (надеюсь) советов. Кроме того, я успел надоесть многим из вас своими остротами. Но книга закончена, и я больше не буду вам докучать.
Фундаментальный анализ - перейти
Фундаментальный анализ - перейти
Фундамент Forex - перейти
Нейронные сети - перейти
Нейросети - перейти
Нейросетевой анализ - перейти
АНС сети - перейти
Справочник по нейросетям - перейти
Связывание файлов - перейти
Шаблоны и сценарии - перейти
Структура публикации - перейти
Компоновка текста и графики - перейти
Специальные эффекты - перейти
Верстка таблиц и бланков - перейти
Верстка книг - перейти
