Практическая работа по созданию сайта в Adobe Dreamweaver cs5

Обновлено: 21.11.2024

Многие предсказывают, что в ближайшие два-три года мобильные телефоны и планшеты превзойдут настольные ПК и станут самыми распространенными устройствами для доступа в Интернет. Adobe реагирует на этот резкий сдвиг, сосредоточившись на новых инструментах для разработки веб-сайтов для различных платформ с помощью HTML, CSS и JavaScript в Dreamweaver CS5.5. В частности, инженеры Dreamweaver тесно сотрудничали с разработчиками jQuery, де-факто стандартной среды JavaScript, для разработки jQuery Mobile. Это новая среда JavaScript/CSS, предназначенная для создания веб-сайтов и приложений, которые стабильно работают на всех основных мобильных платформах, включая iPhone, Android, BlackBerry и Symbian (Nokia). В этой книге подробно рассматривается интеграция jQuery Mobile в Dreamweaver, а также другие новые функции, предназначенные для создания веб-сайтов, которые работают на нескольких устройствах.

На ряде практических примеров в книге показано, как оптимизировать существующий веб-сайт для отображения на компьютерах, планшетах и мобильных телефонах с помощью мультимедийных запросов CSS. Читатели также узнают, как создать специальный мобильный сайт с помощью jQuery Mobile. Хотя Dreamweaver автоматически генерирует большую часть необходимого кода, в книге объясняется структура веб-сайтов и веб-приложений jQuery Mobile, чтобы разработчики могли выйти за рамки основ и добавить пользовательские функции и особенности дизайна. В книге также используется базовая платформа jQuery, демонстрирующая, как новые подсказки кода jQuery в Dreamweaver CS5.5 ускоряют процесс разработки для опытных разработчиков и служат учебным пособием для новичков в jQuery. Читатели узнают, как преобразовать веб-приложение jQuery Mobile в собственное приложение (которое можно загрузить на iPhone или Android-устройство) с помощью PhoneGap, еще одной платформы с открытым исходным кодом.

Статьи по теме

Образец онлайн-главы

Отрывок

Примеры страниц

Содержание

Часть I: Dreamweaver CS5.5
Dreamweaver становится мобильным
Часть II: HTML5 и CSS3
Прогрессивное улучшение с помощью HTML5 и CSS3
Адаптация страниц для мобильных устройств с помощью мультимедийных запросов
Как сделать ваш сайт доступным в автономном режиме
Часть III: jQuery Mobile и PhoneGap
Введение в jQuery Mobile
Углубление в jQuery
Создание мобильного приложения с помощью PhoneGap

Ошибки

Пожалуйста, посетите сопутствующий сайт книги для опечаток и обновлений, опубликованных автором:

Adobe Dreamweaver CS5 — это мощная программа для создания веб-страниц и управления веб-сайтами с редактором HTML, которая используется для проектирования, кодирования и создания веб-страниц, веб-сайтов и веб-приложений профессионального вида. Функции визуального редактирования Dreamweaver позволяют создавать страницы без написания кода. Dreamweaver предоставляет множество инструментов и функций, в том числе следующие:

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

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

• Стандартные веб-инструменты Adobe для разработки. Dreamweaver включает пользовательский интерфейс, одинаковый для всех инструментов Adobe для разработки. Такая согласованность обеспечивает простую интеграцию с другими веб-приложениями Adobe, такими как Adobe Flash, Director, Shockwave и ColdFusion.

К другим ключевым функциям относятся интегрированный пользовательский интерфейс, встроенный файловый менеджер, управление панелями, интеграция с базой данных, а также поддержка стандартов и специальных возможностей. Dreamweaver CS5 настраивается и работает во многих операционных системах, включая Windows 7, Windows Vista, Windows XP, Mac OS X и других.

Руководство по планированию проекта

Процесс разработки веб-сайта, предоставляющего конкретную информацию, требует тщательного анализа и планирования. В качестве отправной точки определите тип и назначение веб-сайта. После того, как тип и цель определены, выберите содержание, которое будет включено. Затем следует рассмотреть основы дизайна и навигацию по веб-сайту. И, наконец, создание навигационной карты или блок-схемы поможет определить дизайн, который будет наиболее полезным для доставки содержимого веб-сайта. Создав структуру, веб-сайт готов к разработке. Подробная информация об этих руководящих принципах представлена во Введении. Кроме того, каждый проект в этой теме обеспечивает практическое применение этих соображений планирования.

Проект — Домашняя страница веб-сайта Montana Parks

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

Рисунок 1-1

Обзор

По мере чтения этого раздела вы узнаете, как создать веб-страницу, показанную на рис. 1-1, выполнив следующие общие задачи:

• Введите текст в документ.

• Сохраните документ.

• Добавить фоновое изображение.

• Форматировать текст в документе.

• Вставить разрыв строки.

• Предварительный просмотр веб-страницы в браузере.

• Сохраните и распечатайте веб-страницу.

Планируйте заранее

Общие правила проекта

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

<р>1. Просмотрите окно рабочего пространства Dreamweaver. Ознакомьтесь с различными макетами и доступными панелями.

<р>2. Определите местоположение для локального сайта. Выберите место и носитель для сохранения сайта. Имейте в виду, что вы будете продолжать изменять страницы и добавлять новые страницы на сайт по мере изучения этой темы. Носителем данных может быть жесткий диск, флэш-накопитель USB или компакт-диск для чтения/записи. Если вы используете флэш-накопитель и собираетесь выполнять все упражнения, емкость носителя должна быть не менее 25 МБ.

<р>3. Определите локальный сайт. Создайте локальный сайт с помощью диалогового окна Dreamweaver Site Setup.

<р>4. Добавьте фон для веб-страницы. Добавление фонового цвета или фонового изображения делает веб-сайт интересным и живым.

<р>5. Выберите слова и шрифты для текста. Текст составляет большую часть контента на большинстве веб-страниц, но посетители веб-сайтов часто избегают чтения длинных блоков текста. Лучше всего быть кратким. Включите заголовки, чтобы разделить текст на разделы. Используйте списки, когда это возможно. Используйте общие слова и простой язык.

<р>6. Определите, как форматировать различные элементы текста. Определите, какой текст будет использоваться в качестве заголовков и подзаголовков, абзацев, маркированных и нумерованных списков на веб-странице.

<р>7. Просмотрите итоговые задания. Подготовьтесь к показу веб-страницы другим пользователям, добавив профессиональные завершающие штрихи, например заголовок веб-страницы, и проверив правописание текста.

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

Запуск Dreamweaver

Если вы используете компьютер для выполнения проекта в этом разделе и хотите, чтобы ваш экран соответствовал рисункам в этом разделе, вам следует изменить разрешение экрана на 1024 x 768. Браузер, используемый для отображения рисунков веб-страницы является Internet Explorer 8. В браузере установлен средний размер текста.

Чтобы запустить Dreamweaver

Начать работу в Dreamweaver так же просто, как открыть существующий HTML-документ или создать новый документ. Следующие шаги показывают, как запустить Dreamweaver на основе стандартной установки. Возможно, вам придется спросить своего инструктора, как запустить Dreamweaver на вашем компьютере.

Рисунок 1-2

Рисунок 1-3

Рисунок 1-4

Среда и рабочее пространство Dreamweaver

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

Dreamweaver предоставляет разработчику веб-сайта восемь предустановленных макетов рабочего пространства: App Developer, App Developer Plus, Classic, Coder, Coder Plus, Designer, Designer Compact и Dual Screen. Программисты, работающие в основном с HTML и другими языками, обычно выбирают рабочее пространство Coder или App Developer. Для опции «Двойной экран» требуется два монитора. В этом макете окно документа и инспектор свойств отображаются на одном мониторе, а панели отображаются на дополнительном мониторе. Классическое рабочее пространство содержит визуально интегрированное рабочее пространство и идеально подходит для начинающих и непрограммистов. В проектах и упражнениях в этом разделе используется классическое рабочее пространство.

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

На экране на рис. 1-4 показано типичное рабочее пространство Dreamweaver с некоторыми наиболее часто используемыми компонентами. Рабочее пространство Dreamweaver представляет собой интегрированную среду, в которой окно документа и панели объединены в одно большое окно приложения. Группы панелей закреплены или прикреплены справа. Панель «Вставка» (также называемая панелью «Вставка») расположена в верхней части окна «Документ», а инспектор свойств — в нижней части окна «Документ». Вы можете перемещать, изменять размер, закрывать или сворачивать панели в соответствии со своими предпочтениями.

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

Когда вы научитесь использовать каждый из этих инструментов, вы обнаружите некоторую избыточность. Например, чтобы применить тег шрифта, вы можете получить доступ к команде через инспектор свойств CSS, меню «Формат» или категорию «Текст» на панели «Вставка». Различные варианты соответствуют различным предпочтениям пользователя. В этом разделе представлены наиболее часто используемые методы. В полях «Другие способы» описываются дополнительные методы выполнения задачи, когда они доступны. Когда вы освоите работу в среде Dreamweaver, вы разработаете методы использования инструментов, которые лучше всего соответствуют вашим личным предпочтениям.

Adobe Dreamweaver – это настольный инструмент для визуального проектирования веб-сайтов. Это интерфейсная IDE (интегрированная среда разработки), которая позволяет быстро переключаться между просмотром HTML, CSS, JavaScript и предварительным просмотром текущего дизайна в реальном времени.

Вы также можете создавать и размещать страницы визуально, используя мощный режим WYSIWYG ("что видишь, то и получаешь"), который автоматически генерирует код во время работы.

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

Нужен веб-хостинг?

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

Блюхост

SiteGround

GreenGeeks

WordPress — самая популярная система управления контентом в Интернете, на которой работает более 25 % всех общедоступных сайтов. WordPress разделяет контент, функциональность и дизайн; Внешний вид сайта WordPress определяется темой. Тема — это набор файлов шаблонов PHP, которые генерируют выходные данные HTML, и один или несколько файлов CSS, определяющих визуальный стиль.

Создание темы WordPress обычно представляет собой упражнение в написании кода, и Dreamweaver был создан специально для того, чтобы помочь дизайнерам страниц избежать написания кода. Фактически, в ранних версиях Dreamweaver код PHP вызывал проблемы с отображением.

Кроме того, Dreamweaver был ориентирован на создание целых HTML-страниц, а не шаблонов страниц, разбитых на несколько файлов PHP. Исходя из этих проблем, может показаться, что Dreamweaver не подходит для разработки WordPress. На самом деле раньше считалось, что WordPress и Dreamweaver взаимоисключающие вещи.

Однако на данный момент это мнение немного устарело. Dreamweaver теперь поддерживает интеграцию с несколькими системами управления контентом, включая WordPress.Редактировать файлы шаблонов так же просто, как и HTML-страницы, а редактор кода Dreamweaver даже включает подсветку синтаксиса и автодополнение для PHP.

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

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

Учебники по работе с WordPress в Dreamweaver

Стоит ли использовать Dreamweaver с WordPress?

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

Безусловно, большинство профессиональных разработчиков интерфейсов обычно не используют Dreamweaver. Однако большинство недостатков Dreamweaver, на которые люди любят жаловаться, в последних версиях исправлено.

WordPress так популярен именно потому, что для его использования не нужно быть профессиональным разработчиком интерфейса. Вы можете быстро создать и запустить хорошо построенный сайт, даже если не знаете, как программировать. Именно поэтому Dreamweaver стал популярным.

Использование Dreamweaver с WordPress позволяет создавать собственные темы без необходимости изучения HTML, CSS, JavaScript и PHP. Это не означает, что вы являетесь фронтенд-разработчиком, но это означает, что вам не обязательно им быть.

Сравните популярные планы веб-хостинга

Нужен отличный веб-хостинг? Хотите сэкономить время? Лучше всего начать с этого короткого списка:

Если вы заинтересованы в разработке веб-сайтов и управлении ими с помощью Adobe Dreamweaver CC 2015, ознакомьтесь с элементами интерфейса Dreamweaver, возможностями расширения приложения и способами создания документов.

12 видео | доступно 43 млн

Adobe Dreamweaver CC 2015 — это мощное приложение для веб-разработки. Здесь вы изучите основы написания кода в Adobe Dreamweaver CC 2015, включая работу с исходным кодом и представлениями.

12 видео | 45 млн

Используйте возможности Adobe Dreamweaver CC 2015 для создания веб-сайтов и управления ими. Узнайте об Adobe Dreamweaver CC 2015, в том числе об интерфейсе Dreamweaver и функциональных возможностях его различных панелей.

12 видео | 44 млн

Добавьте интерактивность и визуальную привлекательность своим веб-сайтам с помощью Adobe Dreamweaver CC 2015. Узнайте о браузерах и веб-серверах, а также о таблицах, DIV, списках, ссылках и изображениях.

12 видео | 39 млн

Добавьте Adobe Dreamweaver CC 2015 в свой набор инструментов для веб-разработки. Узнайте о веб-дизайне в Adobe Dreamweaver CC 2015, включая основные функции адаптивного дизайна, функции редактирования и работу с мультимедиа и дизайном.

12 видео | доступно 40 м

ПОЛУЧИТЕ ЦИФРОВОЙ ЗНАЧОК ПОСЛЕ ЗАВЕРШЕНИЯ ЭТИХ КУРСОВ

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

Цифровые значки останутся у вас навсегда.

КНИГИ ВКЛЮЧЕНЫ

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

9ч 42м книга Авторы

От творческой группы AGI

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

6h 9m книга Авторы

Джанин Уорнер

Это руководство охватывает все обновления новейшей версии Dreamweaver, от воспроизведения видео и аудио без подключаемых модулей до разработки собственных мобильных приложений для Apple iOS, Google Android, Palm, Symbian, BlackBerry и других платформ. Справочник AZ для всех веб-разработчиков.

20h 3m книга Авторы

Джозеф Лоури

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

20h 48m книга Авторы

Джозеф Лоури

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

1h 44m книга Авторы

Ник Вандом

Попробуйте Skillsoft бесплатно!

Начать

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

*Элементы контента для Compliance и Leadership не включены в эту подписку.

Ваш контент + наш контент + наша платформа = путь к успеху в обучении

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

Стремитесь к чему-то большему

Aspire Journeys — это пошаговые пути обучения, которые подтолкнут вас к успеху в карьере.

Исследуйте мир живого обучения с Global Knowledge

Выберите удобный формат обучения, чтобы получить необходимое вам и вашей команде обучение - где, когда и как вы хотите.

Читайте также: