Перейти на страницу
Использование пакета Dreamweaver
В связи с развитием Интернета во всем мире появился спрос на профессию Web-дизайнера. Web-дизайнер — это человек, обладающий художественным вкусом и сведущий в интернет-технологиях, который создает Web-страницы и объединяет их в Web-сайты. Художественный вкус (а желательно и соответствующее образование) — это главное, что должен иметь Web-дизайнер (и -не только Web-дизайнер, но и его коллега из области полиграфии), т. к. только знание интернет-технологий еще не служит гарантией получения качественного результата. Тем более что современные программные средства позволяют ему не вникать во всякие тонкости.
Но что делать, если вы чувствуете в себе творческий порыв, желаете самореализоваться в области Web-дизайна, но с трудом представляете, что такое HTML, CSS и JavaScript? (Конечно, знание всего этого совсем не помешает, но...) Не беда! Специально для вас разработаны программы визуальных Web-редакторов, позволяющие создавать Web-страницы и целые Web-сайты, не вникая в тонкости интернет-технологий и стандартов, так, как вы создаете документы в Microsoft Word.
Эта электронная книга рассказывает о Macromedia Dreamweaver MX — последней версии популярного Web-редактора компании Macromedia. Это исключительно мощная программа, поддерживающая все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, она содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе. По иронии судьбы, Dreamweaver "задвинут" в тень своего более "раскрученного" собрата Microsoft FrontPage. Но — будьте уверены! -он не заслужил такой участи.
Может быть совсем и по-другому. Вы — опытный Web-дизайнер, предпочитающий все делать "врукопашную", но желающий немного автоматизировать свою работу. Dreamweaver поможет вам и в этом случае. Вы сможете быстро сделать "набросок" своей Web-страницы, а потом довести код "до ума" вручную. Поверьте, так работать гораздо удобнее — и вы быстро привыкнете.
Macromedia Dreamweaver — достаточно "старый" пакет. Первая его версия была разработана еще в 1998 году и получила популярность в России благодаря своей "благосклонности" к русскому языку и снисходительному отношению к множеству русскоязычных кодировок. Я пользуюсь Dreamweaver, начиная с версии 2.0. В прошлом году я написал электронная книгау о предыдущей версии Dreamweaver — 4.0. Теперь же, с выходом Dreamweaver MX, я снова взялся за перо, так сказать.
Введение
Изучать Dreamweaver мы будем на конкретном примере. Мы будем делать личный Web-сайт гипотетического Web-дизайнера Ивана Ивановича Иванова. Сначала этот сайт будет совсем простеньким; на его основе мы изучим базовые инструменты программы и основные принципы Web-дизайна. Впоследствии сайт станет сложнее и красивее; мы будем использовать фреймы и таблицы, чтобы придать ему профессиональный вид. Далее мы изучим таблицы стилей, встроенные средства для анимации элементов страницы и сценарии, позволяющие "оживить" страницы нашего сайта.
Как создаются Web-страницы
Так как же делаются те красивые Web-странички, которые выводит нам Web-обозреватель? И откуда они берутся? А вот я слышал в автобусе слово "WWW" и не знаю, что это такое... И вообще, что такое Интернет и почему мы его не видим, как, например, монитор или сообщения об ошибках Windows? Все-все! Сейчас попытаемся ответить на эти вопросы. И начнем с самого последнего.
Рисунки звуки фильмы
Что такое Интернет
Как создаются Web страницы
Простейшая Web страничка
Измененная Web страничка
Гиперссылки
Два окна Web обозревателя
Клиенты и серверы Интернета
Зачем нужны HTML редакторы
Что дальше?
Основные принципы работы с Dreamweaver
В этой главе мы рассмотрим начальные сведения о работе с Macromedia Dreamweaver MX. Вы узнаете, зачем нужны его многочисленные окна и инструменты, какие из них действительно вам понадобятся, а какие — нет. Также мы узнаем о начальных настройках этой программы, в частности, что нужно сделать, чтобы Dreamweaver поддерживал русский язык (изначально он не знаком с русским, т. к. по происхождению — американец)
Поиск и замена текста
Диалоговое окно Find and Replace
Диалоговое окно Find
Диалоговое окно Find - 2
Внимание
Панель Search
Использование регулярных выражений
Регулярное выражение поиска интернетадресов
Регулярное выражение
Литералы регулярных выражений
Начинаем с текста
В этой главе мы, собственно, и начнем работу с Dreamweaver. На первый раз мы не будем усложнять себе жизнь и ограничимся простейшей Web-страницей с краткими сведениями об авторе и набором ссылок на другие, пока еще не существующие страницы Web-сайта.
Создание обычных гиперссылок
Поле ввода интернет адреса в редакторе свойств
Гиперссылка указывающая на сайт Macromedia
Диалоговое окно Select File
Раскрывающийся список
Создание почтовых гиперссылок
Гиперссылка указывающая на почтовый адрес
Кнопка Email Link панели объектов
Диалоговое окно Email Link
Другие гиперссылки
Фоновые изображения
Выше мы рассмотрели, как размещаются на Web-странице всевозможные изображения в разных форматах. Все эти изображения представляли собой полезное содержание страницы и находились в "потоке" текста либо жестко к нему привязанные, либо "плавающие" в нем. Однако стандарт HTML определяет еще и так называемые фоновые изображения, помещаемые под текстом и "просвечивающие" сквозь "прозрачный" цвет графических элементов страницы.
Фоновые изображения
Webстраница с фоновым изображением
Мультимедиа
Поддержка мультимедийных данных
Типы MIME
Таблица стилей HTML
Модули расширения
Кнопка Plugin панели объектов
Модуль расширения
Редактор свойств
Таблицы
Если ввести в поле ввода W какое-либо значение и нажать клавишу Enter, данное значение будет применено ко всем ячейкам таблицы. Используйте эту особенность, если хотите создать таблицу с ячейками одинаковой ширины. Но если вы зададите некорректное значение (например, 50% для таблицы из десяти столбцов), Web-обозреватель сам решит, какой ширины будет та или иная ячейка.
Параметры строки
Результат установки
Параметры таблицы
Вид редактора свойств при выделенной таблице
Внимание
Перекрытие параметров таблицы
Кнопки управления
Внимание
Предопределенные форматы таблиц
Готовый список увлечений
Настройка прокси-сервера или брандмауэра
А теперь давайте поговорим о настройке прокси-сервера или брандмауэра, если таковой используется в вашей организации. Если же вы не настроите Dreamweaver на использование прокси-сервера, вы не попадете в Интернет и не сумеете подключиться к FTP-серверу для отправки файлов сайта.
Панель Site
Панель Site
"Дерево"
Кнопка Expand/Collapse
Панель Site в расширенном виде
Кнопка Connect to
Кнопка Refresh инструментария панели Site
Диалоговое окно Edit Sites
Работа с файлами сайта
Фреймы
Для того чтобы задать свойства наборов фреймов и отдельных фреймов, нужно сначала выбрать один из них. Лучше всего это проделывать в панели Frames. Изначально она отсутствует в доке, поэтому выберите пункт Frames в подменю Others меню Window или нажмите комбинацию клавиш Shift+F2.
Свойства наборов фреймов
Панель Frames
Вид редактора свойств
Внимание
Свойства фреймов
Вид редактора свойств при выделенном фрейме
Параметры фреймов нашего набора
Замещение и работа с ним
Текст замещения
Создание содержимого фреймов
Табличный дизайн
Группа переключателей Width позволяет вам установить ширину ячейки. Переключатель Fixed и расположенное справа от нее поле ввода Width задают фиксированную ширину ячейки. Прежде чем задавать ширину ячейки, не забудьте включить вышеупомянутый переключатель. Другой переключатель в этой группе — Autostretch — задает режим "саморастягивания" ячейки, т. е. ячейка будет занимать все пространство таблицы, оставшееся от других ячеек. В таблице может быть только одна такая ячейка
Меню строки ширин
Параметры таблицы разметки
Вид редактора свойств
Заполнение начальной страницы
Новая начальная страница
Недостатки табличного дизайна
Недостатки таблиц
Таблица разметки
Таблица в любом случае получится
Таблица разметки как правило
Перейти на страницуСодержание раздела
В связи с развитием Интернета во всем мире появился спрос на профессию Web-дизайнера. Web-дизайнер — это человек, обладающий художественным вкусом и сведущий в интернет-технологиях, который создает Web-страницы и объединяет их в Web-сайты. Художественный вкус (а желательно и соответствующее образование) — это главное, что должен иметь Web-дизайнер (и -не только Web-дизайнер, но и его коллега из области полиграфии), т. к. только знание интернет-технологий еще не служит гарантией получения качественного результата. Тем более что современные программные средства позволяют ему не вникать во всякие тонкости.
Но что делать, если вы чувствуете в себе творческий порыв, желаете самореализоваться в области Web-дизайна, но с трудом представляете, что такое HTML, CSS и JavaScript? (Конечно, знание всего этого совсем не помешает, но...) Не беда! Специально для вас разработаны программы визуальных Web-редакторов, позволяющие создавать Web-страницы и целые Web-сайты, не вникая в тонкости интернет-технологий и стандартов, так, как вы создаете документы в Microsoft Word.
Этот сайт рассказывает о Macromedia Dreamweaver MX — последней версии популярного Web-редактора компании Macromedia. Это исключительно мощная программа, поддерживающая все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, он содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе. По иронии судьбы, Dreamweaver "задвинут" в тень своего более "раскрученного" собрата Microsoft FrontPage. Но — будьте уверены! -он не заслужил такой участи.
Использование шаблонов
Представим себе такую ситуацию. Мы вдруг решили добавить в наш сайт новую страницу. Чтобы это сделать, нам нужно изменить полосу навигации во всех страницах, а для этого придется открыть каждую из них в окне документа, добавить ссылку и сохранить страницу. Наш сайт невелик по размеру, и мы выполним эту работу довольно быстро. А если бы он был велик?
Диалоговое окно Export
Обновление страниц на основе шаблонов
Управление шаблонами в окне шаблонов
Кнопка Delete панели Assets
Кнопка Refresh Site List панели Assets
Новые возможности шаблонов
Изменяемые атрибуты
Диалоговое окно Editable Tag Attributes
Диалоговое окно добавления нового атрибута
Диалоговое окно Template Properties
Каскадные таблицы стилей
Каскадные таблицы стилей CSS — это довольно позднее нововведение. Если сам HTML появился в 1989 году, то таблицы стилей — только в 1997. Мало того, таблицы стилей не считаются частью HTML, а "гуляют сами по себе", как кошка Киплинга. И если вы зайдете на сайт WWWC, то увидите, что на описание HTML ведет одна гиперссылка, а на описание CSS — другая.
Параметры шрифта
Комбинированный список
Единицы измерения - стандарт CSS
Параметры фона
Вкладка Background
Параметры абзаца
Вкладка Block диалогового
Параметры размеров и размещения
Вкладка Box диалогового
Графическое изображение
Свободно позиционируемые элементы
Dreamweaver, кроме всего прочего, позволяет выделить одновременно несколько свободно позиционируемых элементов и произвести над ними некоторые манипуляции. В этом случае все выделенные элементы ведут себя как одна группа.
Группа выделенных
Свободно позиционируемые
Свободно позиционируемые элементы
Вид панели редактора
Анимация элементов Web-страниц
Одним из основных преимуществ свободно позиционируемых элементов является возможность управлять их местоположением, размером и видимостью с помощью специально написанных сценариев. Вы можете создавать простую анимацию на Web-страницах, заставляя свободно позиционируемые элементы перемещаться по заданным траекториям. Причем никакой модификации HTML-кода, кроме добавления соответствующих сценариев, не требуется
Зачем нужна анимация
Создание анимации в Dreamweaver
Создание простейшей анимации
Панель Timelines
Комбинированный список анимаций
Предупреждение выводимое
Новая дорожка анимации
Маркер выделенного кадра
Готовая траектория
Более сложная анимация
Использование сценариев
Как вы уже знаете, Web-сценарии позволяют преодолеть ограничение HTML, обусловленное его природой языка разметки страницы. Это ограничение заключается в том, что с помощью HTML можно описать только внешний вид данных, отображаемых на Web-странице, но никак не их поведение при наступлении того или иного события
Webсценарии — подход Dreamweaver Поведения
Поведения поддерживаемые Dreamweaver
События поддерживаемые Dreamweaver
Работа с поведениями
Панель Behaviors
Панель Behaviors
Меню событий панели Behaviors
Пункты подменю Show Events For меню событий
Диалоговое окно Play Timeline
Метатеги
А сейчас будет рассказано о том, чему неопытные Web-дизайнеры мало уделяют внимания. Это возможности не Dreamweaver, а самого языка HTML и различных программ Web-серверов, используемых во Всемирной паутине. Это так называемые метатеги и серверные директивы.
Базовый интернетадрес
Кнопка Base панели объектов
Диалоговое окно Base
Редактор свойств
Перезагрузка
Кнопка Refresh панели объектов
Диалоговое окно Refresh
Редактор свойств
Связи между Webстраницами
Кнопка Link панели объектов
Введение в серверное программирование
Так давайте же сделаем следующий шаг — перейдем от страниц, хранящихся в файлах на сервере, к страницам, генерируемым специальными программами. Как раз написанием таких программ и занимается серверное программирование. Но давайте по порядку. И начнем мы с того, что выясним, зачем нужны эти серверные программы.
Что такое серверное программирование
Зачем нужны серверные программы
Как Webсервер
Расширения файлов серверных программ
Как Webобозреватель отправляет данные
Как данные передаются по Сети
Серверное программирование - Dreamweaver
Введение в базы данных
Формы
Формы (также их называют Web-формами), как вы помните, служат для сбора данных пользователя и отправки их Web-серверу. Они представляют собой набор из элементов управления (полей ввода, флажков, переключателей, списков и обычных кнопок), размещаемых на Web-странице. В этом смысле они аналогичны обычным диалоговым окнам Windows-приложений и работают так же.
Список
Кнопка List/Menu панели объектов
Вид редактора свойств при выделенном списке
Диалоговое окно List Values
Поле ввода имени файла
Кнопка File Field панели объектов
Вид редактора свойств
Графическая кнопка
Кнопка Image Field панели объектов
Вид редактора свойств
Простейшие серверные приложения
Мы полны сил. Нами движут лучшие помыслы. Наш Dreamweaver рвется в бой. Наш Web-сервер установлен и правильно настроен. (О том, как настраивать Microsoft Personal Web Server и Internet Information Server, читайте в поставляемой с ними документации.) Наш "статичный" Web-сайт давно работает и пользуется огромной популярностью. Наш кофе давно сварен и медленно остывает в чашке
Страница отображающая данные
Кнопка Dynamic Text панели объектов
Динамический текст
Создание навигатора
Готовая страница Guestbook asp с навигатором
Создание строки статуса набора данных
Готовая страница
Страница для одновременного просмотра
Привязка элементов управления к данным
Создание сложных наборов данных
Создание интерактивных сайтов
Здесь мы подведем итог всего, что было сказано в трех предыдущих главах: научимся создавать целые интерактивные сайты, построенные на основе серверных Web-страниц. Мы объединим все полученные нами ранее знания в единое целое — Web-сайт, чьи страницы генерируются серверными программами на основе базы данных.
Защита страниц от несанкционированного доступа
Реализация выхода с сайта
Страницы общего доступа
Страница списка категорий
Страница списка высказываний
Страница регистрации посетителя
Реализация поиска высказываний
Что дальше?
Принципы создания интерактивных сайтов
Административные страницы сайта
Заключение
Я рассказал об этой программе все, что знал и что мог найти в поставляемой с ним электронной документации и других информационных ресурсах. Я поделился своими соображениями насчет принципов Web-дизайна и различных интернет-технологий, еще современных и уже устаревших. Вы были озадачены огромным количеством новых терминов, имеющих хождение среди интернетчиков и Web-дизайнеров.
Фундаментальный анализ
- перейти
Фундаментальный анализ
- перейти
Фундамент Forex
- перейти
Нейронные сети
- перейти
Нейросети
- перейти
Нейросетевой анализ
- перейти
АНС сети
- перейти
Справочник по нейросетям
- перейти
Визуальный редактор Dreamweaver
- перейти
Введение
- перейти
Основные принципы работы с Dreamweaver
- перейти
Начинаем с текста
- перейти
унки, звуки, фильмы
- перейти
Таблицы
- перейти
Работа с Web-сайтом
- перейти
Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий