Лекция 2 Работа с дизайном сайта в Dreamweaver

Лекция 2
Работа с дизайном сайта в 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.
Добавляйте на сайт элементы оформления, такие как текст, изображения, замещающие изображения, карты ссылок, цвета, видео и аудио, ссылки HTML, таблицы и так далее.

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

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

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

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

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

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

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

По мере создания страниц необходимо предварительно просматривать их, чтобы видеть, что разработка идет в соответствии с замыслом. Можно писать код в представлении «Разделение», где представления «Код» и «Интерактивный просмотр» расположены рядом.
Вы также можете просматривать веб-страницы в режиме реального времени в браузере.
Если нет необходимости в предварительном просмотре результатов изменений, можно просматривать изменения обычным образом в браузере.
Если подключения к удаленным серверам уже заданы, то для публикации веб-сайта вам необходимо разместить его файлы на удаленном сервере.
Тем, кто работает с Internet, хорошо известно, что наиболее заметные различия между страницами Web и печатными публикациями касаются не цвета, не размера изображений или анимации, а скорости. Конечно, время загрузки страницы имеет существенное значение, но работа Web-дизайнеров напрямую зависит от требований, предъявляемых клиентами к темпам реализации проекта на всех его стадиях, начиная с рождения идеи и заканчивая ее практическим воплощением. Не менее важно и то, как часто клиент планирует обновлять содержание узла, а также добавлять к нему новую информацию.
В мире печати сроки определяются жесткими графиками работ типографий и структур распространения. Однако разработчикам Web не приходится ждать печатников. Какая-то новая, интересная статья, или, скажем, информация о смене руководства большой компании могут появиться в Сети немедленно. Именно в этом сила пакета Macromedia Dreamweaver. Он сбережет время разработчика, а в Web время — решающий аргумент.
Если вы вовлечены в «дикий» мир Web-дизайна, то, вероятно, знаете, что зачастую приходится работать всю ночь, чтобы успеть к назначенному клиентом сроку или опередить конкурентов. В этом могут помочь ценнейшие возможности Dreamweaver, такие как шаблоны, трассировка изображений, Cascading Style Sheets (каскадные таблицы стилей — CSS), улучшенные средства поиска и замены, библиотека элементов, поддержка динамического HTML (DHTML), упрощенное создание таблиц и фреймов, управление структурой узла.
В этой статье вы найдете советы и секреты, которыми делятся дизайнеры Web (в их числе и авторы публикаций). Надеюсь, предлагаемые материалы помогут вам извлечь максимум полезного из этого пакета.