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

В этой статье вы узнаете, как выполнять различные этапы или фазы в области веб-разработки с помощью Dreamweaver.

Примечание.

Подразумевается, что пользователь обладает начальным или промежуточным уровнем знаний о принципах работы веб-домена, HTML, CSS и JavaScript.

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

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

    Допустим, у вас есть четкое представление о том, какой сайт вы хотите разработать, а также вы уже знаете, как и где будете хранить его файлы. Для веб-разработки вы выбрали Dreamweaver и Creative Cloud. Можно переходить к следующему шагу.

  2. Удостоверьтесь, что у вас есть все необходимые для сайта ресурсы. Организуйте их сбор и упорядочивание в локальных папках или в библиотеках Adobe Creative Cloud Libraries.

  3. Создайте в Dreamweaver новый документ, используя:

    • новый пустой документ,
    • начальный шаблон (поставляемый с Dreamweaver) или 
    • файлы шаблонов (*.dwt) от сторонних разработчиков

    Примечание.

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

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

  4. Вам потребуется всего несколько минут, чтобы ознакомиться с рабочей средой Dreamweaver. Подберите для себя удобную рабочую среду и задайте цветовую тему. Расположите панели на свое усмотрение.

  5. Настройте свой сайт в Dreamweaver. Настройте то, каким образом будет выглядеть структура с папками и ресурсами. После того как информация будет организована, а структура определена, можно приступать к созданию сайта. (См. раздел О сайтах Dreamweaver.)

    На данном этапе рекомендуется также настроить подключение к удаленным серверам и тестовые серверы (при наличии динамического содержимого). 

  6. Начните писать код своих страниц в представлении «Код» или конструировать их в представлении «Дизайн» / «Интерактивный просмотр».

    Если вы планируете использовать композиции Photoshop, то можете извлечь их в Dreamweaver и работать с ними тоже. Дополнительные сведения о работе с композициями Photoshop см. в разделе Extract в Dreamweaver CC.

    Добавляйте на сайт элементы оформления, такие как текст, изображения, замещающие изображения, карты ссылок, цвета, видео и аудио, ссылки HTML, таблицы и так далее.

  7. Настройте стиль вашей страницы с помощью CSS. 

    Работать в Dreamweaver с CSS можно различными способами:

    • Можно набирать код CSS вручную. Дополнительные сведения о функциях написания кода в Dreamweaver, которые облегчают ручной ввод кода CSS, находятся в разделе Среда кодирования в Dreamweaver.
    • Если вы недостаточно знакомы с созданием страниц CSS, воспользуйтесь панелью конструктора CSS для получения помощи в создании кода для ваших страниц. Дополнительные сведения см. в разделе Создание макетов страниц с помощью конструктора CSS.
    • Если вы предпочитаете работать с файлами Sass и Less, то Dreamweaver поддерживает эту возможность, позволяя вам переносить их на ваш сайт Dreamweaver, чтобы работать с ними в дальнейшем. После переноса этих файлов Dreamweaver произведет их автокомпиляцию (или же вы можете самостоятельно скомпилировать их вручную), показывая результат изменений CSS в реального времени. Дополнительные сведения об использовании файлов Sass и Less в Dreamweaver см. в разделе Препроцессоры CSS.
  8. Настройте веб-приложение для создания динамического содержимого.

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

  9. Создайте динамические страницы.

    В Dreamweaver можно определить множество источников динамического содержимого, включая извлеченные из баз данных наборы записей, параметры форм и компоненты JavaBeans. Чтобы добавить динамическое содержимое, просто перетащите его на страницу.

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

  10. Тестирование, просмотр и публикация вашего сайта. 

    По мере создания страниц необходимо предварительно просматривать их, чтобы видеть, что разработка идет в соответствии с замыслом. Можно писать код в представлении «Разделение», где представления «Код» и «Интерактивный просмотр» расположены рядом.

    Также можно просматривать страницы в реальном времени на устройстве (при создании адаптивных страниц) или в браузере.

    Если нет необходимости в предварительном просмотре результатов изменений, можно просматривать изменения обычным образом — в браузере.

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

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет