Веб-разработка с использованием Dreamweaver
В этой статье вы узнаете, как выполнять различные этапы или фазы в области веб-разработки с помощью Dreamweaver.
Подразумевается, что пользователь обладает начальным или промежуточным уровнем знаний о принципах работы веб-домена, HTML, CSS и JavaScript.
- Какой поставщик услуг лучше подходит для размещения файлов моего веб-сайта? У меня есть доступ к загрузке файлов на сервер публикаций?
- Какое доменное имя будет использоваться для веб-сайта?
- В случае переноса существующих веб-сайтов в Dreamweaver, где в настоящее время хранятся файлы и ресурсы? У меня есть доступ к серверу, где хранится эта информация?
- Если мне нужен динамический веб-сайт, то каким сервером можно воспользоваться, чтобы протестировать динамически отображаемые данные? У меня есть сведения о сервере веб-приложений для загрузки динамических данных?
- Ресурсы какого типа необходимы для веб-сайта?
- Эти ресурсы будут разработаны с нуля? Если эти ресурсы уже доступны, есть ли у меня к ним доступ?
- Какие приложения для разработки ресурсов лучше использовать?
- Планирую ли я создавать адаптивный веб-сайт?
Допустим, у вас есть четкое представление о том, какой веб-сайт вы хотите разработать, а также вы уже знаете, как и где будете хранить его файлы. Для веб-разработки вы выбрали Dreamweaver и Creative Cloud. Можно переходить к следующему шагу.
Удостоверьтесь, что у вас есть все необходимые для веб-сайта ресурсы. Организуйте их сбор и упорядочивание в локальных папках или в библиотеках Adobe Creative Cloud Libraries.
- новый пустой документ,
- начальный шаблон (поставляемый с Dreamweaver) или
- файлы шаблонов (*.dwt) от сторонних разработчиков.
Если вы не знакомы с Dreamweaver или только начинаете изучать веб-разработку, то начальные шаблоны вам очень помогут в оформлении и дизайне ваших страниц.
Даже если вы планируете начать все с нуля, рекомендуется иногда поглядывать в эти шаблоны для лучшего понимания того, как должен выглядеть хороший веб-дизайн страниц.
Вам потребуется всего несколько минут, чтобы ознакомиться с рабочей средой Dreamweaver. Подберите для себя удобную рабочую среду и задайте цветовую тему. Расположите панели на свое усмотрение.
Настройте свой сайт в Dreamweaver. Настройте то, каким образом будет выглядеть структура с папками и ресурсами. После того как информация будет организована, а структура определена, можно приступать к созданию сайта. (См. раздел О сайтах Dreamweaver.) На данном этапе рекомендуется также настроить подключение к удаленным серверам и тестовые серверы (при наличии динамического содержимого).
Начните писать код своих страниц в представлении «Код» или конструировать их в представлении «Дизайн» / «Интерактивный просмотр». Если вы планируете использовать композиции Photoshop, то можете извлечь их в Dreamweaver и работать с ними тоже. Дополнительные сведения о работе с композициями Photoshop см. в разделе Extract в Dreamweaver. Добавляйте на сайт элементы оформления, такие как текст, изображения, замещающие изображения, карты ссылок, цвета, видео и аудио, ссылки HTML, таблицы и так далее.
- Можно набирать код CSS вручную. Дополнительные сведения о функциях написания кода в Dreamweaver, которые облегчают ручной ввод кода CSS, находятся в разделе Среда кодирования в Dreamweaver.
- Если вы недостаточно знакомы с созданием страниц CSS, воспользуйтесь панелью конструктора CSS для получения помощи в создании кода для ваших страниц. Дополнительные сведения см. в разделе Создание макетов страниц с помощью конструктора CSS.
- Если вы предпочитаете работать с файлами Sass и Less, то Dreamweaver поддерживает эту возможность, позволяя вам переносить их на ваш сайт Dreamweaver, чтобы работать с ними в дальнейшем. После переноса этих файлов Dreamweaver произведет их автокомпиляцию (или же вы можете самостоятельно скомпилировать их вручную), показывая результат изменений CSS в режиме реального времени. Дополнительные сведения об использовании файлов Sass и Less в Dreamweaver см. в разделе Препроцессоры CSS.
Настройте веб-приложение для создания динамического содержимого. Многие веб-сайты содержат динамические страницы, которые позволяют посетителям просматривать сведения, хранящиеся в базах данных, и обычно дают возможность некоторым посетителям добавлять новую информацию и редактировать сведения в базах данных. Для создания таких страниц сначала необходимо настроить веб-сервер и сервер приложений, создать или изменить сайт Dreamweaver, а также соединиться с базой данных. Дополнительные сведения см. в разделе Динамические сайты, страницы и веб-формы.
Создайте динамические страницы. В Dreamweaver можно определить множество источников динамического содержимого, включая извлеченные из баз данных наборы записей, параметры форм и компоненты JavaBeans. Чтобы добавить динамическое содержимое, просто перетащите его на страницу. Можно настроить для страницы показ одной или нескольких записей одновременно, отображение нескольких страниц с записями, добавление специальных ссылок для перемещения от одной страницы с записями к следующей (и обратно). Можно также создавать счетчики записей, чтобы пользователям было удобнее отслеживать их. Дополнительные сведения см. в разделе Динамические сайты, страницы и веб-формы.
Тестирование, просмотр и публикация вашего веб-сайта.
По мере создания страниц необходимо предварительно просматривать их, чтобы видеть, что разработка идет в соответствии с замыслом. Можно писать код в представлении «Разделение», где представления «Код» и «Интерактивный просмотр» расположены рядом. Вы также можете просматривать веб-страницы в режиме реального времени в браузере. Если нет необходимости в предварительном просмотре результатов изменений, можно просматривать изменения обычным образом в браузере. Если подключения к удаленным серверам уже заданы, то для публикации веб-сайта вам необходимо разместить его файлы на удаленном сервере.
Общие сведения о каскадных таблицах стилей
Изучите этот раздел, чтобы узнать основные понятия CSS: правила CSS, селекторы, наследование и т. д. Кроме того узнаете о том, как CSS можно связать с веб-страницами в Dreamweaver.
Сведения о каскадных таблицах стилей
Каскадные таблицы стилей (CSS) — это набор правил форматирования, определяющих отображение содержимого на веб-странице. При форматировании страницы с помощью стилей CSS собственно содержимое страницы разделяется с представлением содержимого. Содержимое страницы (HTML-код) располагается в HTML-файле, а правила CSS, определяющие представление кода, располагаются в другом файле (внешней таблице стилей) или в другой части HTML-документа (обычно в заголовке). Разделение содержимого и его представления значительно облегчает управление внешним видом сайта из единого центра. При необходимости внести изменение не нужно обновлять каждое свойство на каждой странице. Разделение содержимого и его представления также делает HTML-код более простым и аккуратным. Это значительно сокращает время загрузки страницы браузером и облегчает навигацию для посетителей, использующих специальные возможности (например, для тех, кто использует программы для чтения с экрана).
CSS позволяет очень гибко контролировать точный внешний вид страницы. С помощью CSS задаются свойства текста, в том числе специальные шрифты, размеры шрифтов, жирный текст, курсив, подчеркивание, тени, цвет текста и фона, цвет ссылок, подчеркивание ссылок и многие другие. Использование CSS для управления шрифтами обеспечивает единообразное представление макета и внешнего вида страницы в разных браузерах.
Каскадные таблицы стилей также могут использоваться для форматирования и расположения блоков на веб-странице. Блоковым элементом называется автономная часть содержимого, обычно отделенная новой линией в HTML и представленная внешне как блок. Например, теги h1 , p и Div отделяют блоки веб-страницы. Для блоковых элементов можно задавать поля и границы, определять их местоположение, добавлять цвет фона, задавать свойства обтекания текста и т. д. Управление блоками — это основополагающий момент макетирования страницы с помощью CSS.
Сведения о правилах CSS
Правило форматирования CSS состоит из двух частей — селектора и объявления (или в большинстве случаев блока объявлений). Селектором является термин (например, p , h1 , имя или идентификатор класса), который определяет форматируемый элемент, а блок объявлений задает свойства стиля. В следующем примере h1 является селектором, а все, что заключено в фигурные скобки ( <> ), является блоком объявлений.
Объявление свойства состоит из двух частей: свойство (например, font-family ) и значение (например, Helvetica ). Указанное выше правило CSS задает стиль для тегов h1 : текст, заданный тегами h1 , связанными с данным стилем, будет отображен размером 16 пикселов жирным шрифтом Helvetica.
Стиль (определяется правилом или набором правил) располагается отдельно от собственно форматируемого текста, обычно во внешней таблице стилей или в заголовке HTML-документа. Таким образом, однажды заданное правило для тегов h1 может применяться одновременно к нескольким тегам (а в случае существования внешней таблицы стилей — к нескольким тегам на разных страницах одновременно). С использованием каскадных таблиц стилей обновление форматирования становится предельно легким. При обновлении CSS-правила в одном месте форматирование всех элементов с заданным им стилем будет автоматически обновлено.