Adobe dreamweaver cs5 что это
Сегодня мы с вами познакомимся с программой для создания дизайна сайта, так же его редактирования Adobe Dreamweaver.
В прошлой статье « Photoshop вставка молнии на картинку » мы с вами научились создавать молнию и вставлять её в любое изображение.
Кроме этого в конце статьи я обещал показать, как можно в Photoshop создать солнце и шар, но друзья в последнее время я увлекся программой Adobe Dreamweaver и поэтому сегодня я расскажу вам о своем первом знакомстве со столь полезной программой.
Мне она интересна именно как средства для создания дизайна сайта.
В своих тренировках я использую версию CS6.
Для начала давайте в двух словах опишу программу и ее назначение:
Dreamweaver, является визуальным HTML-редактором, позволяет переключаться в режим ручного редактирования кода, осуществляя взаимосвязь между визуальным представлением страницы и ее исходным кодом.
Конечно, как и в любой другой программе изучение необходимо начинать с настроек и внешнего вида.
Настройка программы для создания сайта
Запустите редактор Adobe Dreamweaver:
Нажмите Пуск - Программы - Adobe - Adobe Dreamweaver. После запуска Dreamweaver откроется окно стартовой страницы. С его помощью можно открывать используемые файлы, создавать новые файлы, а также получить доступ к различным ресурсам программы .
В открывшемся окне с возможностью выбора дальнейших действий пользователя в разделе Создать выберите HTML
В окне программы для переключения между режимами отображения и редактирования HTML -документа предназначены три первые кнопки на панели инструментов.
Дизайн, отобразится поле документа. Все основные действия при создании и редактировании HTML-страницы производятся в поле документа.
Вот примерно так выглядит основное рабочее окно программы.
Чтобы Dreamweaver понимал русскую кириллицу необходимо сделать следующие действия:
Чтобы вызвать настройку некоторых параметров, в главном меню откройте пункт Правка , а в нем выберите пункт Настройки .
После этого на экране отобразится окно редактирования параметров. В левой части окна отображаются категории возможных настроек, а в правой – параметры выбранной категории.
Для корректного отображения HTML -документов необходимо указывать кодировку.
Теперь все вновь создаваемые HTML -документы будут поддерживать русские буквы.
Теперь давайте подготовим нашу программу для создания нового сайта:
Выполните команду Веб-сайт èНовый сайт . На экране появится диалоговое окно Настройка сайтов (менеджер сайтов) в нем содержится список созданных сайтов. Пока этот список пуст.
На вкладке Веб-сайт в поле Имя Веб-сайта введите имя сайта.
В поле Локальная папка сайта укажите путь к папке, в которой будут храниться все файлы этого сайта.
Введите название новой папки на английском языке .
При назначении имен файлам необходимо ограничиться цифрами и буквами латинского алфавита и использовать символы только нижнего регистра.
Два раза щёлкните левой кнопкой мыши на созданной папке.
Откроется окно редактора.
В верхней правой части редактора Дизайнер выберите из выпадающего списка вариант настройки рабочего окна Классический.
А теперь давайте приступим к тестовому заданию:
В поле Название введите название страницы для браузера, например, Авторское право
Сделайте разметку главной страницы сайта с помощью таблицы :
Выполните команду Вставка - Таблица. В окне Таблица введите:
В поле Строки количество строк таблицы = 3
В поле Столбцы – количество столбцов таблицы = 2
В поле Ширина таблицы – ширина таблицы = 100 %
Остальные параметры оставьте без изменений.
Объедините ячейки первой строки таблицы, режим HTML выделите всю строку и нажмите на кнопку Объединить выбранные ячейки в диапазон на панели свойств; (или выбрать одноименную команду из контекстного меню).
Или выберите команду меню Изменить - Таблица - Объединить ячейки . То же выбрать из контекстного меню.
Или нажать сочетание клавиш Ctrl+Alt+M.
Оформите строку в Панели свойств: (режим CSS )
В поле Высота – введите высоту строки таблицы = 40.
Выравнивание По горизонтали – По центру
Отметьте галочкой пункт Без переноса .
Введите текст заголовка в ячейку и отформатируйте его: Здравствуйте !
Оформите текст стилем Заголовок 1 . Выделите его или просто установите курсор в любое место
Выберите команду меню Формат - Формат абзаца - Заголовок 1 .
Эти действия можно выполнить из контекстного меню Форматирование абзаца. Или в Панели свойств перейти в режим HTML и выбрать из выпадающего меню Формат è Заголовок 1.
Чтобы выбрать цвет текста, откройте Свойства страницы внизу рабочего окна редактора, выберите категорию Внешний вид (HTML) и в строке Текст выберите желтый цвет для текста.
Заполните ячейку таблицы черным или темно-серым цветом:
На Панели Свойств в окне Фон для определения цвета фона ячейки таблицы, выберите черный цвет из палитры.
Сохраните страницу под именем index.
Посмотрите страницу в браузере.
Для этого в панели Документ щелкните на кнопке Просмотр и отладка в браузере . Можно также выбрать клавишу на клавиатуре F12
Заполните нижние ячейки таблицы ( сведения об авторских правах ):
По аналогии с верхними ячейками, оформите нижние ячейки таблицы, также объединив их в одну ( черный цвет – для фона и желтый цвет – для текста).
Введите текст : Иванов И И.
Цитирование опубликованных материалов на сайте без разрешения автора не допускается.
В поле Высота (на Панели свойств) – введите высоту строки таблицы = 40 (пикс).
Выравнивание По горизонтали - По правому краю.
Выделите фрагмент Иванов И И. Подчеркните текст, для этого выберите команду меню ФорматèСтильèПодчеркивание. Или воспользуйтесь одноименной командой контекстного меню.
Перед фамилией вставьте Специальный символ для обозначения авторских прав. Для этого:
- выберите команду меню Вставка - HTML - Специальные символыèАвторское право.
- на вкладке Текст панели Инструментария объектов кнопка Знакиè Авторское право.
Заполните левую ячейку таблицы (ссылки)
В поле Ширина введите ширину ячейки = 100 (пикс) . или отметьте ширину ячейки с помощью линейки, переместив ее на границу равную 100 пикс.
Выравнивание По горизонтали - По центру
По вертикали – По верхнему краю.
Вставьте в левый столбец ссылки Увлечения, Проекты, Ссылки, Обо мне
Для того, чтобы гиперссылки открывали соответствующие Web-страницы в нужном вам фрейме, надо правильно установить параметры Цель (цели гиперссылок).
В выпадающем списке Цель есть разные значения параметра:
Blank – загружает страницу в новом окне Web-обозревателя;
Parent и top - загружает страницу в само окно обозревателя, т.е. страница заменит собой весь набор фреймов.
Self - загружает страницу в текущий фрейм (в котором находится гиперссылка)
Заполните основное содержимое – средняя ячейка таблицы.
Выравнивание По горизонтали - По левому краю
По вертикали – По верхнему краю.
Меня зовут Иванов Иван Иванович. Я вольный Web-дизайнер. А это мой личный Web-сайт, который я сделал сам в программе Dreamweaver.
Оформите стилем Заголовок 2 , в Панели свойств перейти в режим HTML и выбрать из выпадающего меню Формат è Заголовок 2.
Введите приведённые ниже строки маркированного списка и оформите стилем Заголовок 3.
Сделайте выравнивание по левому краю
Создайте маркированный список (перечисления), предварительно выделив текст и нажав на кнопку Неупорядоченный список на Панели свойств :
На этом сайте вы можете прочитать:
§ о моих увлечениях
§ о выполненных мной проектах
§ подробнее обо мне, любимом
Чтобы изменить вид маркеров, выделите маркированный список и выберите команду меню Формат - Список - Свойства.
В окне Свойства списка в строке Стиль из выпадающего списка выберите один из вариантов маркера.
То же можно выбрать из контекстного меню маркированного списка.
Перед текстом: На этом сайте вы можете прочитать: вставьте горизонтальную разделяющую линию.
- выберите команду меню Вставка - HTML - Горизонтальная линия.
Или вставьте линию с помощью тега HR , выделите ее и на Панели с войства можно отредактировать ширину горизонтальной линии. (Цвет для линии можно задать с помощью опции тега HR – color).
Выровняйте линию по Центру , щелкнув по кнопке Align Center на панели Properties .
По аналогии с предыдущими ячейками, оформите среднюю ячейку таблицы (черный цвет – для фона и желтый цвет – для текста).
В итоге должно получится вот такое чудо:
Для тех кому мало текстовой части, и он хотел бы видеть больше скриншотов процесса обучения пишите в комментариях и если желающих наберется много, то я подготовлю статью с картинками.
Если Вам, как и мне интересно постоянно изучать новое подписывайтесь на мой канал и давайте учится вместе!
Preview your designs in standard screen resolutions, or use media queries to define resolution. When testing for devices that change page orientation based on how the device is held, use the landscape and portrait options during preview.
Media query support
Use media queries to customize the appearance of your site for different screen resolutions. For more information, see Creating media queries (CS5.5 and later).
Web applications for mobile devices
Quickly design a web application that works on most mobile devices using the jQuery Mobile widget. For more information, see Creating web applications for mobile devices (CS5.5).
Package web applications for Android, iPhone, and iPad
Package your web applications in Dreamweaver, and deploy them to Android™ and iOS-based devices. For more information, see Packaging web applications as native mobile applications (CS5.5).
HTML5, CSS3, and jQuery support
Dreamweaver supports code hinting for HTML5, CSS3, and jQuery.
Starter layouts are also available for building HTML5 pages from scratch. Dreamweaver supports the HTML5 feature to embed videos in HTML pages. For more information, see Embed videos in web pages (HTML5).
The CSS panel has been enhanced to support commonly used CSS3 properties. For more information, see Code hints and Enhancements to CSS3 support in the CSS styles panel (CS5.5).
FTPS support
Transfer data using FTPS. FTPS (FTP over SSL) provides both encryption and authentication support as compared to SFTP that supports only encryption. For more information, see FTPS connections (CS5.5).
W3C validator support
Create standards-compliant HTML and XHTML pages using the W3C validator in Dreamweaver. For more information, see Validate documents using W3C validator (CS5.5).
Adobe BrowserLab
Dreamweaver CS5 integrates with Adobe BrowserLab, one of the new CS Live online services, which provides a fast and accurate solution for cross-browser compatibility testing. With BrowserLab you can preview web pages and local content using multiple viewing and comparison tools. See BrowserLab.
Business Catalyst integration
CSS enhancements
CSS Disable/Enable
CSS Disable/Enable lets you disable and re-enable CSS properties directly from the CSS Styles panel. Disabling a CSS property simply comments out the specified property without actually deleting it. See Disable/Enable CSS.
CSS Inspection
Inspect mode lets you visually display the CSS box model properties—including padding, border, and margin—in detail without reading code or requiring a separate third-party utility such as Firebug. See Inspect CSS in Live view.
CSS starter layouts
Dreamweaver CS5 includes updated and simplified CSS starter layouts. The complex descendent selectors from the CS4 layouts have been removed and replaced with simplified, easy-to-understand classes. See Create a page with a CSS layout.
Dynamically-Related Files
The Dynamically-Related Files feature lets you discover all of the external files and scripts necessary to assemble PHP-based Content Management System (CMS) pages, and displays their filenames in the Related Files toolbar. By default Dreamweaver supports file discovery for the Wordpress, Drupal, and Joomla! CMS frameworks. See Open Dynamically-Related Files.
Live view navigation
Live view navigation activates links in Live view, allowing you to interact with server-side applications and dynamic data. The feature also allows you to enter a URL to inspect pages served from a live web server and edit pages you have browsed to if they exist in one of your locally defined sites. See Previewing pages in Dreamweaver.
PHP custom class code hinting
PHP custom class code hinting displays the proper syntax for PHP functions, objects, and constants, helping you type more accurate code. Code hinting also works with your own custom functions and classes, as well as third-party frameworks, such as the Zend framework.
Simplified site setup
The newly redesigned Site Definition dialog box (now the Site Setup dialog box) makes it easier to set up a local Dreamweaver site so that you can start building web pages right away. The remote server category lets you specify your remote and testing servers in one view. See Set up a local version of your site and Connect to a remote server.
Site-specific code hints
The Site-specific code hints feature lets you customize your coding environment when working with third-party PHP libraries and CMS frameworks such as WordPress, Drupal, Joomla!, or other frameworks. Theme files for blogs and other custom PHP files and directories can be included or excluded as sources for code-hints. See Site-specific code hints.
Subversion support enhancements
Dreamweaver CS5 expands its support for Subversion, allowing you to move, copy, and delete files locally, and then synchronize changes with your remote SVN repository. The new Revert command allows you to quickly correct tree conflicts or rollback to a previous version of a file. Additionally, a new extension allows you to specify which version of Subversion you would like to work with on a given project. See Use Subversion (SVN) to get and check in files.
Просматривайте свои страницы при стандартных разрешениях экрана или задавайте разрешение с помощью мультимедийных запросов. При тестировании для устройств, которые меняют ориентацию страницы в зависимости от того, как пользователь держит устройство, используйте книжный и альбомный варианты ориентации.
Поддержка мультимедийных запросов
Используйте мультимедийные запросы, чтобы настроить внешний вид сайта для разных разрешений для вывода на экран. Дополнительные сведения см. в разделе Создание мультимедийных запросов (CS5.5 и выше).
Веб-приложения для мобильных устройств
Быстро проектируйте веб-приложения, работающие на большинстве мобильных устройств, с помощью мини-приложения jQuery. Для получения дополнительной информации см. раздел Создание веб-приложений для мобильных устройств (CS5.5).
Упаковка веб-приложений для устройств под управлением Android, iPhone и iPad
Упаковывайте веб-приложения в Dreamweaver и разворачивайте их на устройствах под управлением Android™ и iOS. Дополнительные сведения см. в разделе Развертывание веб-приложений в качестве приложений для мобильных устройств (CS5.5).
Поддержка HTML5, CSS3 и jQuery
Dreamweaver поддерживает предоставление подсказок по коду для HTML5, CSS3 и jQuery.
Также доступны макеты шаблонов для создания HTML5-страниц с нуля. Dreamweaver поддерживает функцию HTML5 для встраивания видеороликов в HTML-страницы. Для получения дополнительной информации см. Встраивание видеороликов в веб-страницы (HTML5).
Панель CSS была усовершенствована, теперь она поддерживает часто используемые свойства CSS3. Дополнительную информацию см. в разделах Подсказки по коду и Улучшенная поддержка CSS3 на панели стилей CSS (CS5.5).
Поддержка FTPS
Передача данных по протоколу FTPS. В отличие от протокола SFTP, который предлагает только поддержку шифрования, протокол FTPS (FTP по SSL) поддерживает и шифрование, и аутентификацию. Для получения дополнительной информации см. Подключения FTPS (CS5.5).
Поддержка средства проверки W3C
Создавайте страницы HTML и XHTML, соответствующие стандартам, с помощью средства проверки W3C в Dreamweaver. Дополнительную информацию см. в разделе Проверка документов с помощью средства проверки (CS5.5).
Adobe BrowserLab
Dreamweaver CS5 интегрируется с Adobe BrowserLab, одной из новых сетевых служб CS Live, что обеспечивает быстрое и точное решение для кросс-браузерного тестирования совместимости. С помощью BrowserLab можно просматривать веб-страницы и локальное содержимое, используя несколько инструментов просмотра и сравнения. См. раздел BrowserLab.
Интеграция с Business Catalyst
Улучшения CSS
Отключение/включение CSS
Отключение/включение CSS позволяет отключить и заново включить свойства CSS непосредственно с панели стилей CSS. При отключении свойства CSS оно заключается в комментарии, а не удаляется по-настоящему. См. раздел Включение/отключение CSS.
Проверка CSS
Режим проверки позволяет во всех подробностях отобразить свойства модели фрагмента CSS (включая заполнение, границу и поля) без чтения кода и без какой-либо отдельной сторонней программы (например, Firebug). См. раздел Проверка CSS-стилей в интерактивном просмотре.
Макеты шаблонов CSS
Dreamweaver CS5 содержит обновленные и упрощенные макеты шаблонов CSS. Сложные вложенные селекторы из макетов CS4 были удалены и заменены упрощенными, легкими для понимания классами. См. раздел Создание страницы с макетом CSS.
Динамически связанные файлы
Функция «Динамически связанные файлы» позволяет обнаруживать все внешние файлы и сценарии, необходимые для сборки PHP-страниц системы управления содержимым (CMS), и отображать их имена на панели «Связанные файлы». По умолчанию Dreamweaver поддерживает обнаружение файлов для CMS-платформ Wordpress, Drupal и Joomla! . См. раздел Открытие динамически связанных файлов.
Навигация в режиме интерактивного представления
Навигация в режиме интерактивного представления активирует ссылки в интерактивном представлении, позволяя взаимодействовать с серверными приложениями и динамическими данными. Эта функция позволяет ввести URL-адрес для проверки страниц, полученных от основного веб-сервера, и редактировать обнаруженные страницы, если они существуют на одном из локально определенных сайтов. См. раздел Просмотр страниц в Dreamweaver.
Подсказки по коду пользовательских классов PHP
Подсказки по коду пользовательских классов PHP выдают правильный синтаксис функций, объектов и констант PHP, помогая вводить более правильный код. Подсказки по коду также работают с пользовательскими функциями и классами, а также со сторонними платформами, например с платформой Zend.
Упрощенная настройка сайта
Переработанное диалоговое окно «Определение веб-сайта» (теперь диалоговое окно «Настройка сайта») упрощает настройку локального сайта Dreamweaver для скорейшего начала создания страниц. Категория удаленного сервера позволяет указать удаленный и тестовый серверы в одном представлении. См. разделы Настройка локальной версии сайта и Подключение к удаленному серверу.
Подсказки по коду для конкретного сайта
Функция «Подсказки по коду для конкретного сайта» позволяет настраивать среду создания кода при работе со сторонними PHP-библиотеками и платформами CMS, такими как WordPress, Drupal, Joomla! или другими. Файлы тем для блогов и другие пользовательские файлы и каталоги PHP могут быть включены или исключены из источников для подсказок по коду. См. раздел Подсказки по коду для конкретного сайта.
Улучшение поддержки Subversion
Креативные профессионалы могут начать процесс разработки дизайна с обновленного конструктора разметки CSS, а затем применить расширенные свойства CSS для увеличения контроля и гибкой возможности креатива.
С расширенным и более мощным Live View, дизайнеры могут использовать панель CSS-стилей для создания и редактирования CSS без особых знаний технологии написания кода.
Dreamweaver CS5 упрощает процесс разработки и тестирования дизайна страниц. В приложение может быть отображена панель, которая позволяет дизайнерам взаимодействовать с кодом, или быстро переключать свойства параметров CSS.
1. Упрощенный процесс настройки сайта
Теперь вы можете работать быстрее, потому что Dreamweaver CS5 сообщит вам, если потребуется какая-то дополнительная информация о вашем сайте.
2. Расширенные начальные шаблоны CSS
Новые CSS-шаблоны с упрощенной структурой, предоставляются на основе, соответствующей стандартам. На их основе вы можете разрабатывать собственные страницы.
3. Поддержка CMS на PHP
Вы можете отдалиться от привычного статичного HTML и начать разрабатывать сайты, приближенные к так называемому термину CMS. Генерируйте свои страницы в Live View и тестируйте элементы приложений по отдельности.
4. Подсказки по модификации кода относительно спецификаций сайта
Если вы являетесь разработчиком, который концентрирует свое внимание на написании javascript и PHP-кода, то вы сможете повысить уровень собственного кода для выбранной платформы, или на основе отдельных приложений или сайтов.
5. Всесторонняя поддержка CSS
Теперь у вас есть возможность понизить нужду в том, чтобы заботиться о сторонних браузерах, которые могут неправильно генерировать ваш код CSS.
6. Интеграция с Adobe BrowserLab
Тестируйте свои страницы в различных типах браузеров в Adobe BrowserLab с помощью нового сервиса CS Live. Теперь вы можете проверять фактическое состояние динамических страниц и приложений в сети или при локальной разработке.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Добавление вариантов поведения JavaScript (35)
Работа с другими приложениями (35)
Создание шаблонов и управление ими (54)
Визуальное построение страниц Spry (51)
Использование сетевых служб Adobe (3)
Отображение XML-данных с помощью XSLT (24)
Подготовка к построению динамических сайтов (36)
Создание динамических страниц (64)
Визуальное построение приложений (56)
Создание форм (33)
Специальные возможности (1)
Уроки и статьи по оптимизации и продвижению сайтов
Идеи Вопросы Желания Проблемы Обсуждения Отзывы Черный список заказчиков |
Стажировка на создании сайтов —лучший способ научиться делать сайты самому
SEO технологии
Энциклопедия оптимизации
- Терминология SEO
- Начало продвижения
- Контент для сайта
- Реклама и Маркетинг
- Сайты для бизнеса
- Веб-Дизайн и Графика
- Поисковые технологии
- Алгоритмы поисковых систем
- Поисковые системы
- Источники Трафика, или Где Взять Посетителей
- ТЗ и стратегии продвижения сайта
- Методы Оценки Продвижения
- Начало продвижения сайта в поисковых системах
- Ошибки оптимизации —как спорные SEO-методы вредят Сайту
- Интернет- Бизнес
- Управление
- Истории успеха
- Стратегии Бизнеса
- Идеи Бизнеса
- Интернет-маркетинг
Активные группы сообщества
У Вас — нет открытых заявок
Обучение Dreamweaver CS5
- Использование Dreamweaver CS5
- Рабочее пространство
- Работа с сайтами Dreamweaver
- Создание файлов и управление ими
- Управление ресурсами и библиотеками
- Создание страниц c помощью CSS
- Разметка страниц с помощью HTML
- Добавление содержимого на страницы
- Создание ссылок и навигация
- Просмотр страниц
- Работа с кодом страницы
- Добавление вариантов поведения JavaScript
- Работа с другими приложениями
- Создание шаблонов и управление ими
- Визуальное построение страниц Spry
- Использование сетевых служб Adobe
- Отображение XML-данных с помощью XSLT
- Подготовка к построению динамических сайтов
- Создание динамических страниц
- Визуальное построение приложений
- Создание форм
- Специальные возможности
Документация и уроки
Хостинг — для Joomla
Для того, чтобы Ваш сайт был виден в Интернет 24 часа в сутки, нужно очень серьезно отнестись к выбору хостинга для сайта на Joomla. Хостинг для Joomla может быть ПЛАТНЫЙ и БЕСПЛАТНЫЙ. Бесплатный хостинг имеет очень ограниченные возможности и подойдет только для тестирования сайта. Хотя на зарубежных хостингах часто встречаются "заманчивые предложения", и вроде бы все есть, но как показывает практика, возможности бесплатных хостингов всегда ограничены.
Читайте также: