Практическая работа по созданию сайта в Adobe Dreamweaver cs5
Обновлено: 04.07.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
Выберите удобный формат обучения, чтобы получить необходимое вам и вашей команде обучение - где, когда и как вы хотите.
Читайте также: