- •Глава 1. Предметная область сайтостроения. Средство разработки 3
- •Глава 2. Применение среды Dreamweaver. 14
- •Введение Глава 1. Предметная область сайтостроения. Средство разработки
- •1.1. Предметная область сайтостроения.
- •1.2 Средство разработки веб-сайта Dreamweaver.
- •Глава 2. Применение среды Dreamweaver.
- •2.1. Установка и удаление Adobe Dreamweaver cs5.
- •2.2. Рабочие пространство среды Dreamweaver.
- •2.3. Создание динамического сайта средствами Dreamweaver.
1.2 Средство разработки веб-сайта Dreamweaver.
AdobeDreamweaver – это HTML-редактор от компании Adobe, который на сегодняшний день очень известный. Первая его версия была выпущена в 1997 году и на сегодняшний день существует уже 8 его версий.
Для начинающих Dreamweaver – просто находка! При создании первых сайтов он способен значительно облегчить обучение. Есть сервис подсказок и приличное количество шаблонов, элементов оформления, скриптов – с помощью всего этого легко, как говорится, «набить руку». Очень простые странички не заберут у пользователя много времени и сил.
Опытные веб-мастера, используя Dreamweaver, имеют значительно больше возможностей. Например, можно использовать CSS3, разрабатывать страницы под разные операционные системы (iOS и Android) и приложения. Есть уникальная панель «Многоэкранный просмотр», с помощью которой возможно оптимизировать сайт под самые разные устройства, не зависимо от размеров их экранов (вплоть до мобильных телефонов) и при этом ваш сайт будет выглядеть так, как вы хотите, как вам нужно.
AdobeDreamweaver - программный пакет, предназначенный для редактирования и разработки веб-сайтов. Он обладает всеми нужными функциями – от простого ввода HTML кода и его редактирования, до создания скриптов и настройки таблицы стилей CSS. Dreamweaver - WYSIWYG редактор. Это означает, что за любым изменением текущей или созданием новой страницы, пользователь может наблюдать в области представления. Новые функции и дополнения, регулярные обновления, рассчитанные на постоянно развивающуюся сферу создания сайтов, делают данный продукт популярнейшим HTML-редактором. Сегодня AdobeDreamweaver предлагает пользователям:
- разработку и дизайн кода в одном пакете;
- поддержку и удобное редактирование CCS3;
- работу с html5 и xml;
- свою коллекцию скриптов;
- простую работу с мультимедиа – добавление картинки или видео на сайт, не вызывает никаких трудностей;
- встроенный менеджер загрузки, позволяющий с легкостью перемещать готовые проекты на веб-сервер.
Разработчики Dreamweaver позаботились об удобстве работы. Пользователю не придется долго изучать интерфейс утилиты, поскольку все необходимые панели удобно расположены, отлично реализован визуальный обзор работы и подсказки по корректности кода. Помимо вышеуказанных особенностей программы, стоит выделить несколько основных ее функций, которые способны облегчить работу пользователя:
- подсветка кода – позволяет быстро сканировать код, находить возможные ошибки. Весьма полезная функция для начинающих разработчиков сайтов;
- автодописывание кода – позволяет беречь время в процессе написания тегов и их атрибутов, посредством открытия списка возможных вариантов на основе нескольких введенных букв;
- панели свойств – наилучший инструмент для скорого создания ссылок, нумерованных и ненумерованных списков, выделения шрифта курсивом и полужирным;
- Найти/Заменить – глобальная функция, позволяющая экономить драгоценное время. Пользователь может находить и заменять код как на странице, так и на всем сайте. Поиск осуществляется по специальным тегам, тексту или исходному коду;
- шаблоны – дизайн одной созданной страницы сайта можно использовать для всего проекта, достаточно выбрать области, которые будут редактироваться и останутся неизменными;
- вкладки и связные файлы – значительно упрощают работу с текущими файлами, когда приходится перемещать контент и расставлять ссылки;
- сервис BrowserLab – способствует идентичному отображению сайта в различных браузерах. Поддерживаемые форматы файлов: .htm, .html, .shtm, .shtml, .stm, .ssi, .inc, js, .xml, .xsd,.xsl, .xslt, .dtd, .rss, .lbi, .dwt, .css, .asp, .asa, .aspx, .aspcx, .asmx, .cs, .vb, .config, .master, .ctm, .ctml, .cfc, .as, .asc, .asr, .txt, .php, .lasso, .jsp, .jst, .jsf, .tld, .java, .wml, .edml, .vbs, .vtm, .vtml.
Минусов программы AdobeDreamweaver.
1. Запутанный интерфейс. В самом верху программы мы видим 15 опций: это и пункты меню и иконки быстрого изменения интерфейса программы. Чуть ниже находятся еще от 5 до 50 опций (в зависимости от количества открытых файлов), а далее мы видим еще 15 элементов. Таким образом, перед нами одновременно находятся более 35 элементов, с помощью которых мы можем выполнять те или иные функции программы. Не каждый может удержать в голове значение всех этих элементов.
2. Непродуманная система обучения. Если вы предпочтете изучать работу в программе Dreamweaver самостоятельно, то это будет очень непросто. Несмотря на то, что большинство функций программы сгруппированы логично и последовательно, все же некоторые элементы могут поставить в ступор даже профессионала.
3. Погрешности визуального редактора. Как мы уже говорили выше, нельзя доверять отображению сайта в визуальном редакторе Dreamweaver, т.к. это все-таки не браузер. От версии к версии разработчики программы стараются сделать отображение кода в режиме дизайна более точным, но все же пока оно далеко от реальности.
4. Громоздкий динамический код. Dreamweaver имеет возможность создания динамических сайтов, если вы работаете с локальным или удаленным сервером. Единственная проблема в том, что код, который создает Dreamweaver (точно так же, как и встроенные снипетты, о которых мы поговорим в следующем пункте), перегружен и усложнен. Гораздо лучше писать код вручную или использовать готовые фреймворки такие как CakePHP, CodeIgnitor или Zend.
5. Плохо написанные сниппеты. Причина в том, что эти заготовки кода неоправданно большие. Например, чтобы вставить проверку всего одного поля формы, Dreamweaver предложил нам вставить целых 19 строк javascript-кода.
6. Неопределенность в написании css-стилей (до версии CS4). С этой проблемой приходится сталкиваться снова и снова. Используя панель свойств, можно оформлять участки кода при помощи сss-стилей, однако новички слишком увлекаются этим, и в итоге получаются сотни строк кода с неопределенными стилями типа style1, style2 и т.д. Причем все стили автоматически прописываются Dreamweaver между тегами веб-страницы.
7. Неполный контроль над кодом. Использование визуального редактора — это самый простой путь потерять контроль над кодом. Когда люди используют только режим дизайна, то их код перегружается тегами, которые автоматически прописываются, где только можно. Особенно много встречается пустых строк.
8. Действительно полезными являются только 10% функционала. Вы только взгляните на интерфейс программы, как уже упоминалось, вы увидите больше 35 различных кнопочек, меню, иконок, большая часть из которых никогда вам не пригодится. Такое чувство, что Dreamweaver буквально напичкан лишней информацией.
Обзор рабочих процессов Dreamweaver.
Планирование и настройка сайта. Следует определить, куда должны идти файлы, а также проанализировать требования сайта, профили аудитории и цели сайта. Кроме того, следует учитывать технические требования, например доступ для пользователей, а также ограничения, связанные с браузером, подключаемыми модулями и загрузкой. После того как информация будет организована, а структура определена, можно приступать к созданию сайта.
Организация файлов сайта и управление ими. На панели «Файлы» можно легко добавлять, удалять и переименовывать файлы и папки, чтобы соответствующим образом изменить организацию. На панели «Файлы» содержится также множество инструментов для управления сайтом, обмена файлами с удаленным сервером, настройки процесса извлечения/возврата, предотвращающего перезапись файлов, а также для синхронизации файлов на локальном и удаленном сайтах. Панель «Ресурсы» помогает упорядочить ресурсы сайта. Большинство ресурсов на панели «Ресурсы» доступны для перетаскивания в документы Dreamweaver. Dreamweaver позволяет также управлять различными аспектами сайтов Adobe®Contribute®.
Создание макета веб-страниц. Для создания внешнего вида сайта необходимо выбрать метод работы или воспользоваться сочетанием параметров макета Dreamweaver. При создании собственного макета можно пользоваться элементами AP Dreamweaver, стилями позиционирования CSS или стандартными макетами CSS. Инструменты на рабочем столе позволяют быстро конструировать страницы путем рисования структуры страницы и последующего ее переупорядочения. Если нужно отобразить в браузере одновременно несколько элементов, можно использовать фреймы для создания макетов документов. Наконец, можно создать новые страницы на основе шаблона Dreamweaver, чтобы при его изменении макеты этих страниц автоматически изменялись.
Добавление содержимого на страницы. Добавление ресурсов и элементов оформления, таких как текст, изображения, замещающие изображения, карты ссылок, цвета, видео и аудио, ссылки HTML, меню переходов и так далее. Можно применять встроенные средства создания страниц для таких элементов, как заголовки и фон, осуществлять ввод непосредственно на страницу или импортировать содержимое из других документов. Dreamweaver также предоставляет варианты поведения при выполнении задач в ответ на определенные события, такие как проверка формы при нажатии посетителем кнопки «Отправить» или открытие второго окна браузера, когда кончилась загрузка основной страницы. Наконец, Dreamweaver предоставляет средства для увеличения производительности веб-сайта и для тестирования совместимости страниц с разными веб-браузерами.
Создание страниц ручным кодированием. Кодирование веб-страниц вручную — еще один подход к созданию страниц. Dreamweaver предоставляет простые в использовании визуальные средства редактирования и в то же время предоставляет сложную среду для кодирования; так что для создания и редактирования страниц можно воспользоваться как одним, так и другим подходом либо обоими.
Настройка веб-приложения на динамическое содержимое. Многие веб-сайты содержат динамические страницы, которые позволяют посетителям просматривать сведения, хранящиеся в базах данных, и обычно дают возможность некоторым посетителям добавлять новую информацию и редактировать сведения в базах данных. Для создания таких страниц сначала необходимо настроить веб-сервер и сервер приложений, создать или изменить сайт Dreamweaver, а также соединиться с базой данных.
Создание динамических страниц. В Dreamweaver можно определить множество источников динамического содержимого, включая извлеченные из баз данных наборы записей, параметры форм и компоненты JavaBeans. Чтобы добавить динамическое содержимое, просто перетащите его на страницу.
Можно настроить страницу на показ одной или нескольких записей одновременно, отображение нескольких страниц записей, добавление специальных ссылок для перемещения от одной страницы данных к следующей (и обратно); можно также создавать счетчики записей, чтобы пользователям было удобнее отслеживать записи. Приложения и бизнес-логику можно инкапсулировать с помощью Adobe® ColdFusion®, веб-служб и других технологий. Если требуется больше гибкости, можно создать заказные варианты поведения сервера и интерактивные формы.
Тестирование и публикация. Тестирование страниц является непрерывным процессом, происходящим на протяжении всего цикла разработки. В конце цикла сайт публикуется на сервере. Многие разработчики также планируют периодическое сопровождение, чтобы гарантировать, что сайт работает и остается актуальным.
