Лучшие приложения Adobe CC для создания web-дизайна сайта
Веб-дизайнеру требуется намного больше, чем возможность просто творить. Невозможно узнать заранее, когда в голову придет новая идея. Чтоб максимально выразить свои творческие возможности, нужно иметь правильные инструменты под рукой. Что представляет собой современное программное обеспечение для веб-дизайна? Давайте рассмотрим это ниже.
Если вы задали этот вопрос в разговоре с новичком или профессиональным веб-мастером, приложения Adobe Creative Cloud были бы наиболее вероятной их рекомендацией.
Программное обеспечение для разработки от Adobe, позволит вам создавать графические проекты, выполнять фото- и видеомонтажные задания, оптимизировать рабочий процесс с помощью сервисов облачных команд и многое другое. Как веб-дизайнеру, вам нужно использовать только проверенное программное обеспечение.
Ниже приведен список наиболее популярных программ Adobe, которые активно используются при настройке шаблонов сайтов (например, от компании
- Photoshop
- Adobe Illustrator
- Adobe Muse
- Приложение Lightroom Photoshop
- Adobe Dreamweaver
Photoshop
Photoshop — самый популярный инструмент для многих веб-дизайнеров. Это больше, чем просто программное обеспечение для редактирования фотографий. Вы можете использовать его для создания графических конструкций с нуля, 3D-иллюстраций, видеороликов, веб-приложений, мобильных приложений и не только, при настройке шаблона сайта.
Adobe Illustrator
С помощью Photoshop Illustrator вы можете создавать векторные рисунки и иллюстрации, используя коллекцию инструментов формы. Это одно из лучших настольных приложений для рисования логотипов. Использование идеальных фигур без касания клавиш управления стало возможным благодаря функции “Подсказка”.
Adobe Muse
Muse позволяет создавать красивые web-дизайны сайтов без кодирования. Это платформа для создания веб-сайтов с интерфейсом Photoshop. Muse идеально подходит для начинающих пользователей, благодаря интуитивно понятному интерфейсу редактора drag-and-drop.
Когда вы создаете свой сайт (это особенно важно при использовании тем Adobe Muse), вы также можете настраивать некоторые элементы главной страницы. К ним относятся параметры навигации, хедера и футера.
Приложение Lightroom Photoshop
Приложение Lightroom Photoshop — это еще одно программное обеспечение для веб-дизайна, которое Adobe предлагает использовать в работе. В отличие от остальных настольных приложений, Photoshop Lightroom имеет программное обеспечение для веб-дизайна, совместимое с новейшими версиями iOS и Android. Программное обеспечение ориентировано на корректную настройку фотографий для веб-сайтов. С его помощью вы можете добавить дымку в некоторые области фотографии, настроить цвет, редактировать фотографии с экранов карманных устройств и т.п.
Adobe Dreamweaver
Загрузите Dreamweaver для создания полностью адаптивных веб-сайтов с современными макетами. В Dreamweaver есть функции, которые непременно оценят разработчики и веб-дизайнеры. Данное программное обеспечение позволяет кодировать все основные языки программирования. Также включен редактор WYSIWYG.
Послесловие
Это пятерка лучших приложений Adobe CC, которые веб-мастера могут использовать для создания привлекательных веб-сайтов. Главное, что пользователь может сам выбрать наиболее подходящий вариант для работы, учитывая свои навыки и подбирая функционал, который ему нужен, чтоб создать web-дизайн сайта.
Cравнение Adobe Muse и Adobe Dreamweaver « Блог по Бизнесу
Какая программа самая лучшая для создания сайта? В какой программе создавать сайты ПРОСТО, а главное БЫСТРО? В этом видео-уроке я отвечу на эти вопросы!
Итак, мы сравним 2 популярные программы:
- Adobe Dreamweaver
- Adobe Muse
Какие будут критерии оценки?
- Простота создания сайта. Припустим новичок захотел создать сайт. Сможет ли он создать его без каких-либо предварительных знаний о создании сайта?
- Скорость создания сайта. Важно на сколько быстро вы можете создать сайт. Это может быть 1 или 2 дня, а может быть и целый месяц. Поэтому этот критерий мы так же учитываем.
- Стоимость программы. Мы сравним насколько доступны эти 2 программы обычному пользователю интернета.
- Возможность создания различных типов сайтов. Например, блог, интернет магазин и т.д.
Оценивать эти 2 программы мы будем по 5-бальной шкале. Итак, ПОЕХАЛИ! 🙂
1. Простота создания сайта.
А) Adobe Dreamweaver
Чтобы понять насколько просто создать сайт в той или иной программе, нужно посмотреть на её интерфейс.
Это скриншот программы Adobe Dreamweaver. В левой части программы мы видим HTML код, на котором пишется сайт. В правой же части экрана окно просмотра. То есть блок, в котором нам показывают, какой сайт получился в итоге после того, как мы его написали в HTML.
Далеко не все пользователи интернета знают, что такое HTML вообще. И ещё меньшая часть разбирается в создании сайта с помощью HTML и CSS. Поэтому единственный бал, который я могу поставить за простоту создания – это 1.
B) Adobe Muse
Давайте опять же посмотрим на интерфейс программы. Adobe Muse – это конструктор сайтов. Что это означает? Это значит то, что вам не нужно использовать HTML и CSS, а точнее знать эти языки разметки. Вы просто используя инструменты программы, создаёте дизайн сайта, который вам нужен. После чего программа Adobe Muse ПРЕВРАЩАЕТ ВАШ САЙТ В HTML. То есть, если в программе Dreamweaver Вы сначала пишите HTML и CSS (а для этого вам нужно знать эти языки), а потом программа превращает написанный код в сайт, то в программе Adobe Muse вы создаёте дизайн сайта, а дальше программа преобразовывает в HTML, CSS и т.д.
Таким образом Вам НЕ НУЖНО ЗНАТЬ НИЧЕГО, кроме интерфейса программы, который, к стати, вообще не сложный, в нём разберётся даже ребёнок. ПОЭТОМУ! За простоту создания сайта, программе Adobe Muse я ставлю 5 балов.
Простота создания сайта — Muse
2. Скорость создания сайта.
Скорость, с которой Вы создадите сайт напрямую коррелирует с простотой создания сайта. Чем проще вам создавать сайт, тем быстрее вы его создадите. И из личного опыта я скажу, что создание сайта в Dreamweaver может занимать от 1-3х дней, до 2-х и 3-х недель.
В программе Adobe Muse можно вполне создать сайт за 1 вечер или максимум за 1-2 дня. ПОЭТОМУ! Программа Dreamweaver получает 2 бала, в то время, как Muse получает 5 балов! Я не знаю ни одной другой программы, кроме Muse, в которой можно было бы так быстро создавать сайты.
Скорость создания сайта: Muse и Dreamweaver
3. Стоимость программы.
Adobe Muse и Adobe Dreamweaver программы не бесплатные. Их создатель компания Adobe и они продаются за определённую стоимость.
Программа Dreamweaver стоит 29$ в месяц. Либо можно купить навсегда за 400$. Программа Muse стоит 15$ в месяц.
В принципе, это небольшие деньги, если сопоставлять с тем, что вы получаете взамен. А вы получаете готовые инструменты для создания сайта. Поэтому, оценки будут соответствующие. Программе Dreamweaver я ставлю 4 бала. Программе Muse, потому что она дешевле, я ставлю 5 балов.
Стоимость: Muse и Dreamweaver
Ну и все мы прекрасно понимаем, что эти программы без проблем можно скачать на различных торентах в рунете и платить за них совсем не обязательно.
4. Создание различных типов сайтов.
Мы сравним, насколько универсальны эти программы и насколько они могут справляться с теми задачами, которые мы перед ними ставим.
Первый тип сайта, который мы рассмотрим, это блог. Возможно ли создать блог в программе Dreamweaver и Muse?
На своём опыте скажу, что в программе Dreamweaver блог создать можно. Блог – это обычные странички и их без проблем можно создать в этой программе. Точно так же их можно создать и в программе Adobe Muse. Как пример такого блога, это мой блог, на котором вы находитесь.
Следующий тип сайта – это интернет магазин. Возможно ли создать магазин в этих п
Создание сайта в Adobe Muse. Мой рабочий процесс.
Смотрите более свежий подход к созданию сайта в Adobe Muse по этой ссылке.
В предыдущей статье я кратко показал Вам процесс создания прототипа в программе Adobe Illustrator. Что происходит дальше? После того, как прототип создан я продолжаю создание сайта в программе Adobe Muse. Вот как это происходит.
Этап №1. Предварительная подготовка.
а) Использование модульной сетки. На этом этапе я создаю рабочий документ и использую 12 колонок и ширину экрана 980 px.
Вот так это выглядит в готовом варианте. 12 колонок — это наиболее часто используемый формат при создании сайтов.
Зачем это нужно? Нужно это для того, чтобы элементы на странице имели свой размер и логику.
Я не ограничиваюсь 12 колонками, а создаю дополнительную модульную сетку на сайте modulargrid.org.
Вертикальные линии называются «базовыми линиями». Этот термин используется в типографики. Таким образом создавать сайт намного проще. Все имеет свою структуру. После создания необходимой сетки я делаю заливку в Adobe Muse. Вот, что получается в итоге.
б) Типографика. В основном при разработке сайта я использую 1 шрифт. Реже 2 шрифта и подготавливаю страницу со всеми размерами шрифта заранее.
Этап №2. После того, как сохраню все изображения в отдельную папку, то переношу ранее созданный прототип в Adobe Muse и размещаю его сбоку.
Таким образом можно смотреть на прототип и задача создания сайта облегчается в разы.
Этап №3. Добавляю спец. эффекты, если этого требует задача. Эффекты могут быть такие, как например такие как «Parallax scrolling» или анимация из программы Adge Animate.
Чтобы посмотреть, что получилось в итоге, нажмите на эту ссылку.
Создание сайта в Adobe Dreamweaver
Несмотря на то, что мы рассматривали создание первой странички в Блокноте, о реализации больших и сложных проектов с помощью лишь этого текстового редактора речи не идёт.
Для верстальщиков и дизайнеров есть множество программ, один из наиболее популярных продуктов в этом сегменте — Adobe Dreamweaver.
Программа позволяет легко и быстро писать HTML/CSS-код. Простоте способствует визуальный интерфейс: слева расположен текстовый редактор, в котором виден код, справа — окно, отображающее результат, то есть вы одновременно можете создавать страницу и видеть, как она будет отображаться в браузере.
В Adobe Dreamweaver не обязательно создавать сайты с нуля — здесь можно редактировать и уже готовые проекты, например, скачать шаблон и изменить его на свой вкус будет гораздо проще, чем писать код самостоятельно от начала до конца.
Несмотря на массу преимуществ, многие предпочитают такому функциональному ПО, как Dreamweaver, простые текстовые редакторы, в том числе Блокнот, потому что код после визуальных редакторов якобы получается «грязным».
Бывает и такое, но к Dreamweaver это не относится. Во-первых, здешний редактор подсвечивает код и обладает функцией автоподстановки, то есть помогает вам не совершать ошибок во время вёрстки. Во-вторых, с помощью инструмента проверки кода можно посмотреть, соответствует ли написанное стандартам, и при необходимости исправить ошибки.
Не весь код в Dreamweaver нужно создавать вручную. Разработчики оснастили продукт панелью свойств, благодаря которой можно превратить текст в список, сделать его курсивным или полужирным, добавить ссылку с помощью мыши, не вмешиваясь в HTML при помощи редактора.
Всё это и многое другое в совокупности позволяет сэкономить время разработки сайта, сделать код адаптивным и валидным, соответствующим стандартам и не содержащим ошибок. Программа Adobe Dreamweaver облегчит вам, как дизайнеру или верстальщику, трудовые будни и сэкономит время.
Полезные ссылки:
Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
В этой главе мы познакомимся с замечательной программой, с помощью которой создают сайты — Adobe Dreamweaver. Это интуитивно понятный визуально ориентированный HTML-редактор. Мы уже знаем начальные элементы, из которых состоит веб-ресурс. С помощью Dreamweaver мы сможем делать сайты сложнее, лучше и быстрее, чем, если бы мы писали руками в блокноте. Для начала давайте познакомимся с основными управляющими элементами редактора.
В открывшемся окне нам редактор предлагает несколько вариантов создания сайта. Начнем с самого простого:
- Нажмите на ссылку Site (обозначена цифрой 1). В открывшемся окне выберите New Site.
- Мы увидим такое окно:
Перейдите на вкладку Advanced, в категорию Local Info. В поле Site name введите название сайта, в поле Local root folder введите путь к папке, где будут хранится файлы вашего ресурса. Дальше, нажмите кнопку ОК.
- После этого вы снова попадете в окно как на рис. 1. Справа во вкладке Files будут отображаться файлы вашего сайта (обозначено цифрой 3).
- Сейчас нажмите на ссылку HTML (цифра 2) для создания первого файла веб-проекта.
- После этого вам откроется следующее окно:
Цифрой 1 обозначено место, где будет название нашего файла, цифрой 2 место, куда мы можем вписать название нашей страницы, которая будет отображаться в браузере, цифрой 3 обозначено место, где мы сможем выбрать, как будет отображаться наш сайт в редакторе.
Пощелкайте по области 3, вы увидите что редактор отображает нашу страницу по-разному. Если мы нажмем на кнопку Code, редактор отобразит только код нашей страницы, если мы нажмем на Design, то редактор покажет нам, как бы выглядел сайт в браузере. На рисунке 3 нажата кнопка Split, в этом режиме редактор показывает нам сверху страницу в режиме код, а снизу страницу в режиме дизайна.
В самом низу находится панель форматирования, в ней мы можем форматировать текст как в Word.
По умолчанию редактор добавляет вместо тега <html> следующие строки кода:
Оставим эти строки как есть.
В поле Title (цифра 2) введите название нашей страницы- First Site.
Щелкните правой кнопкой мышки по названию файла (цифра 1), выберите Save As, введите имя файла — index.html и нажмите Сохранить.
С правой стороны, во вкладке Files вы увидите свой файл index.html.
По умолчанию главной страницей веб-ресурса должен быть файл с названием index.html.
В этой главе мы познакомились с редактором Dreamweaver, познакомились с некоторыми элементами управления редактора, научились создавать файлы и страницы нашего проекта.
В следующей главе мы научимся вставлять и форматировать текст нашего сайта с помощью Dreamweaver.
Как создать самостоятельно сайт: Adobe Portfolio
Adobe Portfolio – это сервис от компании Adobe, предназначен для создания сайта-портфолио. Сервис заточен под творческую аудиторию и позволяет за короткое время создать полноценный сайт. Платформа будет полезна как дизайнерам там и скульпторам, иллюстраторам, каллиграфам, режиссерам и тд.
Интеграция с Behance и другими продуктами
Хочется сказать сразу, что сервис является продолжением площадки Behance. Adobe Portfolio автоматически синхронизируется с Behance и переносит все ваши проекты на сайт. Если вы активный пользователь Behance это может сэкономить вам много времени и сил на пути к созданию собственного сайта.
Adobe позаботились над плотным взаимодействием всех сервисов и систем, создав единую экосистему – Creative Cloud. Например вы можете публиковать работы с Lightroom прямо на сайт.
Получаете доступ к Typekit Fonts – это дает возможность подключить дополнительные шрифты из базы, что поможет сделать ваш сайт более привлекательным.
Технические моменты
Adobe Portfolio адаптивен и оптимизирован под различные устройства: телефон, планшет, лептоп, настольный компьютер.
Есть возможность создавать свое собственное доменное имя. По умолчанию ваше имя выглядит так: yourname.myportfolio.com. Но если у вас есть купленный домен, вы можете его легко подключить.
Совсем недавно стала доступна возможность делать сетку из изображений. Можно делать приятное отображение иллюстраций и фотографий на сайте.
Вы можете сделать весь сайт или отдельные страницы защищенными паролем.
Как это работает
После того, как вы вошли в свой аккаунт, вам необходимо выбрать макет сайта. Сервис содержит десятки готовых шаблонов. Даже самый требовательные перфекционист найдет для себя подходящий дизайн. Прежде чем выбирать какой-то шаблон вы можете его просмотреть в режиме live view.
Когда вы определились с шаблоном, просто выбираем его. Остальное платформа сделает за вас: добавит работы из вашего behance портфолио и все аккуратно структурирует.
Все страницы можно редактировать и оформлять. Каждый ваш проект будет оформлен точно так же, как вы его оформляли на behance. Но это не говорит о том, что вы не сможете это изменить. Все легко редактируется и правится.
Вы с легкостью можете менять цвета, шрифты, логотип и тд.
Окей, а можно ли создать свои собственные страницы?
Да, кроме того, что вы можете редактировать и оформлять уже добавленные страницы, вы можете создавать новые.
К сервису можно подключить Google Analytics и смотреть статистику как на полноценном сайте.
Также на сайте представлена поисковая оптимизация, которая поможет поисковику находить ваш сайт. Конечно это не полноценная СЕО оптимизация, но хорошо, что хоть так.
Если вам все надоело и вы хотите поменять тему, это очень легко делается. Нужно нажать на кнопку Switch Layout и выбрать другой шаблон. Adobe Portfolio автоматически перенесет все разделы вашего сайта под новый шаблон.
После того как вы все настроили – самое время посмотреть как будет выглядеть ваш сайт. В превью доступны разные режимы отображения сайта: мобильная версия, планшет, экран компьютера.
Если все выглядит так, как вы и хотели – сайт можно публиковать.
Цена
Если вы пользуетесь подпиской Creative Cloud, Adobe Portfolio будет для вас абсолютно бесплатным. Платформа будет для вас приятным бонусом от компании Adobe.
Плюсы:
- Очень быстро работает
- Полная интеграция с продуктами от Adobe
- Подойдет тем, у кого нет времени создавать свой сайт
- Есть возможность подключить свое доменное имя
- Работа сайта напоминает оформление проекта на behance
- Возможно подключить доменное имя
- Можно подключить Google Analytics
- Быстро менять шаблоны и не вносить правки
Минусы:
- Много ограничений по наполнению страницы
- Нельзя интегрировать другие сервисы типа mailchimp и др.
- Слабая СЕО оптимизация
- Слишком плотное взаимодействие с Behance
- Английский язык
Вывод.
Adobe Portfolio будет отличным вариантом для тех, кому нужен простой, стильный и рабочий сайт. Если у вас есть портфолио на behance и вы думаете о том, чтобы создать свой собственный сайт – это отличное решение, Adobe Portfolio синхронизируется с вашим аккаунтом на behance и перенесет все проекты на сайт.
Если вы хотите сделать продающий полноценный сайт, функционала Adobe Portfolio вам может оказаться мало.
Читайте так же:
Как создать самостоятельно сайт: конструктор сайтов uKit
Урок 1. Начало работы с Adobe Dreamweaver CS4 | | Уроки MODx Evo
Цель: ознакомиться с Dreamweaver при создании веб-страницы, а так же с рабочей областью программы.
Задачи:
- Исследовать рабочую область.
- Научиться создавать новую страницу, используя содержимое CSS.
- Научиться сохранять документ.
- Научиться изменять название страницы и текстовые заголовки.
- Научиться вставлять текст из внешнего документа.
- Научиться добавлять изображения на передний план и в качестве фоновых изображений.
- Научиться создавать, изменять и выбирать стили CSS.
- Научиться работать с режимами отображения Code (Код) и Code and Design (Код и дизайн).
Прежде, чем приступить к изучению, скачайте необходимые материалы здесь.
В процессе выполнения всех лабораторных работу, вами будет создан полноценный веб-сайт туристической компании.
Структура веб-страниц представлена на рисунке 1.
Рисунок 1 — Структура итогового веб-сайта
В результате выполнения данной лабораторной работы у вас должна получиться такая веб-страница (рисунок 1.1):
Рисунок 1.1 — Предварительный просмотр веб-страницы
Использование Welcome screen
Окно Welcome screen (Экран приветствия) обеспечивает быстрый доступ к страницам, с которыми вы недавно работали, помогает легко создавать разные типы страниц и предоставляет прямой доступ к некоторым ключевым темам, в которых можно найти ответы на интересующие вас вопросы. Welcome screen появляется при первом запуске программы или если не открыты какие либо иные документы.
Давайте используем окно Welcome screen, чтобы изучить способы открытия документа.
1. Чтобы открыть новую пустую страницу, щелкните по варианту HTML в столбце Create New (Создать) (рисунок 1.2).
Рисунок 1.2 — Окно Welcome screen
2. Перед вами откроется новый HTML документ (рисунок 1.3).
Рисунок 1.3 — Новое окно HTML
Выбор макета CSS
В Adobe Dreamweaver CS4 есть 32 файла макетов CSS, дизайн каждого из которых отличается. В этом задании мы выберем один файл и изменим его.
- Выполните File => New (Файл => Создать).
- Выберите столбец Blank Page (Пустая страница) в диалоговом окне New Document (Создать документ).
- Выберите HTML в столбце Page Type (Тип страницы).
- Выберите 2 column fixed, left sidebar, header and footer (2 колонки фиксированной ширины, боковое поле слева, верхний и нижний колонтитул) в столбце Layout (Макет).
- Не изменяйте настройки других опций, установленные по умолчанию, и щелкните по кнопке Create (Создать).
- Выберите File => Save (Файл => Сохранить).
- После появления диалогового окна Save As (Сохранить как) перейдите в папку lab1. Введите «Umbria.html» и кликните по кнопке Save.
Выбор режима отображения документа
Большинство операций по веб-дизайну мы будем выполнять в окне Design, но помните что у окна Document есть четыре режима отображения (рисунок 1.4):
- Design (Дизайн) – представляет страницу в контексте подобном браузеру;
- Code (Код) – отображает исходный код страницы;
- Code and Design (Код и дизайн) – объединяет и режим отображения Design и режим отображения Code. Щелкните по кнопке Split (разбить), чтобы отобразился этот режим отображения.
- Live (Интерактивный просмотр) – представляет страницу в браузере, функционирующем в режиме реального времени.
Рисунок 1.4 — Режимы отображения
Режимы отображения связаны друг с другом. Любые изменения, сделаные в одном из них, сразу можно увидеть и в других.
Изменение заголовка страницы
Заголовок страницы отображается в строке заголовка браузера. Заголовки страницы являются одним из ключевых элементов, используемых поисковыми системами для индексации веб-сайтов.
- Выберите заполнитель текста «Untitled Document» («Документ без названия») в поле Title (название) панели инструментов Document (рисунок 1.5).
- Напечатайте туда «Umbria Hill Town Tours» и нажмите Enter.
Рисунок 1.5 — Панель инструментов Document
Изменение заголовков
Заполнители заголовков в Dreamweaver легко изменить.
1. Два раза щелкните по тексту заполнителя Title, чтобы его выбрать. Затем введите «Путешествуйте по Умбрии с нами» (рисунок 1.6).
Рисунок 1.6 — Изменение заполнителя заголовка
2. Наведите курсор в начало текста заполнителя Main Content (Основное содержание) и выделите всю фразу.
3. Выделив текст, введите «Ты получаешь удовольствие. Мы работаем.» (рисунок 1.7)
Рисунок 1.7 — Изменение заполнителя содержания
4. Выберите File => Save (Файл => Сохранить).
Вставка текста
Простой текс можно изменять так же легко, как и заголовки.
1. Поместите курсор перед простым текстом заполнителя и выделите текст до конца, чтобы выбрать второй заполнитель заголовка и все абзацы.
2. Нажмите клавишу Delete, чтобы удалить то, что вы выбрали.
3. Перейдите к файлу Text.txt расположенный в папке Lessons/lab1/Text.txt.
4. Скопируйте текст в буфер обмена.
5. Вставьте скопированный текст под заголовком «Ты получаешь удовольствие. Мы работаем.» (рисунок 1.8).
Рисунок 1.8 — Вставка текста
Текст автоматически будет отформатирован как абзацы.
6. Таким же образом введите «Umbria Hill Town Tours» в поле Footer.
7. Создайте конец строки нажав Shift+Enter, затем введите «Наши контакты».
Вставка изображений
1. Выберите в боковой панели все содержимое, включая заголовок заполнителя Sidebar1 Content и два последующих абзаца.
2. Нажмите Delete.
3. Щелкните по <h4> и нажмите Delete в селекторе тегов, расположенном внизу окна Document, чтобы удалить тег <h4> (рисунок 1.9).
Рисунок 1.9 — Селектор тегов
4. Если панель Insert (Вставка) является невидимой, сделайте её видимой, выбрав Window => Insert (Окно => Вставка). Выполните Insert => Common => Images (Вставка => Общий => Изображение) (рисунок 1.10).
Рисунок 1.10 — Панель Insert
5. Перейдите к файлам находящимся в папке Lessons/lab1/ и выберите sculpted-garden.jpg и нажмите OK (рисунок 1.11).
Рисунок 1.11 — Вставка изображения sculpted-garden.jpg
6. Поместите курсор в начале основного абзаца, который начинается словами «Приходите и насладитесь», и выберите Images на панели Insert.
7. Выберите изображение italian-hill-town.jpg и нажмите ОК.
8. Введите «italian-hill-town» в качестве дополнительного текста. Нажмите ОК (рисунок 1.12).
9. Если панель Properties невидима, выберите Window => Properties.
10. Выбрав только что вставленное изображение, активируйте fltrt во всплывающем меню Class (Класс) панели Properties.
Класс fltrt аббревиатура от float right, соответственно fltlft – float left.
11. Выберите File => Savе.
Рисунок 1.12 — Вставка изображения italian-hill-town.jpg
Выбор и изменение стилей CSS
В современных веб-страницах используются каскадные таблицы стилей (CSS) для стилизованного оформления и макета. Веб-страницу часто сравнивают со стулом с тремя ножками, в роли которых выступают HTML, CSS и JavaScript, являющиеся компонентами ее структуры. HTML — это содержимое, материал, который вы вводите в режиме отображения Design. CSS — это внешний вид и макет с определенными элементами, цветами и фонами. JavaScript добавляет интерактивную функцию. В этом упражнении вы измените цвет фона существующей страницы, добавите графики на задний план и настроите несколько текстовых атрибутов. Все эти действия выполняются посредством использования панели CSS Styles (Стили CSS).
CSS можно использовать для изменения свойств стиля любого тега HTML, например тега <body>.
1. Выберите Window => CSS Styles (Окно => Стили CSS). Откроется панель CSS Styles.
2. При необходимости щелкните по кнопке All (Все) на панели CSS Styles, чтобы изменить текущий режим Current (Текущий).
Режим All отображает все стили CSS, ассоциируемые с текущей страницей. У вас должен быть открыт документ в окне просмотра документа, чтобы увидеть какие-либо стили на панели CSS Styles.
3. Откройте запись <style> на панели All Rules (Все правила), щелкнув по кнопке (+).
В первой лабораторной работе (lab1) правила стилей находятся вверху документа. При помощи скобок Dreamweaver указывает, что стили являются внутренними для документа: <style>. В последующих уроках вы будете работать со стилями, хранимыми во внешней таблице стилей. Dreamweaver отобразит эти таблицы стилей на панели CSS Styles по имени (например, mystyles.css).
4. Выберите body и щелкните по опции Edit Rule (Редактировать правило) – символ карандашика внизу панели CSS Styles (рисунок 1.13).
Рисунок 1.13 — Панель CSS Styles
5. После появления диалогового окна CSS Rule (Определение правила CSS) для «body» выберите категорию Background (Фон). Щелкните по палитре цветов Background чтобы открыть color picker (выбор цвета).
6. Используйте «пипетку» в выборе цвета и щелкните по ячейке белого цвета.
Рисунок 1.14 — Диалоговое окно CSS Rule
Dreamweaver автоматически вставит в поле цвета заднего фона шестнад-цатеричное значение для белого цвета #FFF.
7. Щелкните по кнопке ОК, чтобы подтвердить изменение. Dreamweaver обнаружит новый цвет на панели Properties. Вам, возможно, потребуется расширить нижнюю границу панели CSS Styles, чтобы увеличить панель Properties и увидеть необходимый цвет.
Подобно элементу <body>, для других элементов страницы, например <div#sidebarl>, можно также устанавливать отдельный цвет фона. Чтобы изменить цвет фона для какого-либо элемента, выберите этот элемент в селекторе тегов и щелкните по иконке Edit Rule, чтобы подтвердить изменения.
8. Выберите File => Save.
Вставка графического фона заголовка
В то время как изображения переднего плана вставляются непосредственно на страницу, фоновые изображения размещаются при помощи CSS.
1. Поместите курсор в любое место текста заголовка «Путешествуйте по Умбрии с нами».
2. Выберите <div#header> в селекторе тегов.
Это обозначает тег <div> с ID заголовка #header. Обратите внимание, что выбранный заголовок div подчеркнут линией синего цвета в окне Document.
3. Щелкните по опции Current (Текущий) на панели CSS Styles, чтобы переключиться из текущего режима.
4. При необходимости измените панель About (Об) на Rules (Правила), щелкнув по иконке Show cascade of rules for selected tag (Показать каскад правил для выбранного тега). Выберите .twoColFixLtHdr #header hi на панели Rules. Вам может потребоваться увеличить панель CSS Styles, чтобы все правильно отображалось.
5. После появления диалогового окна CSS Rule definition for .twoColFixLtHdr #header (Определение правила CSS для .twoColFixLtHdr #header) выберите категорию Background. Щелкните по кнопке Browse (Обзор), расположенной сразу после поля с изображением Background. Откроется окно Select Image Source (Выбрать исходный файл изображения).
6. Перейдите к lab1/cloud_header.jpg в диалоговом окне Select Image Source. Щелкните по кнопке Choose.
7. Выберитеno-repeat (не повторять) во всплывающем меню Background-repeat (Повтор фона). Щелкните по кнопке ОК.
Рисунок 1.15 — Диалоговое окно CSS Rule (Background)
Настройка текста, шрифтов и цветов
1. Поместите курсор в любое место текста заголовка «Путешествуйте по Умбрии с нами».
2. Выберите <h2> в селекторе тегов (рисунок 1.16)
Рисунок 1.16 — Выделенный заголовок h2
- Выберите режим Current (Текущий) на панели CSS Styles (если выбран режим All, щелкните по кнопке Current).
- На панели Rules (Правила) щелкните по кнопке Show cascade of rules for selected tag (p). Выберите .twoColFixLtHdr #header h2 в Cascade (Каскад).
- Щелкните по опции Edit Rule (Изменить стиль).
- После появления диалогового окна CSS Rule definition for .twoColFixLtHdr #header h2 (Определение правила CSS для .twoColFixLtHdr #header h2) выберите Type (Тип) из столбца Category (Категория).
- Выберите разные шрифты в списке Font-family (Семейство шрифтов), например Georgia, Times New Roman, Times, serif и т. п.
- Откройте палитру цветов и используйте «пипетку»», чтобы выбрать белый цвет. Щелкните по кнопке ОК, чтобы подтвердить изменения.
Рисунок 1.17 — Диалоговое окно CSS Rule (Type)
Использование панели Properties
1. Выберите предложение « В течении двух недель вы сможете наслаждаться уходом за телом.» в окне Document.
2. Щелкните по кнопке I, чтобы изменить текст на курсивный текст.
3. Щелкните по кнопке CSS на панели Properties.
4. Выберите <еm> в селекторе тегов.
5. Выберите <New CSS Rule> (Создать правило CSS) в меню Targeted Rule (Целевое правило).
6. Выберите Edit Rule (Изменить правило) на панели Properties. Откроется диалоговое окно New CSS Rule (Создать правило CSS).
7. Щелкайте по Less Specific (Менее точно) до тех пор, пока в поле Selector Name (Имя селектора) не появится #mainContent р em.
8. Щелкните по кнопке ОК (рисунок 1.18).
Рисунок 1.18 — Диалоговое окно New Css Rule
9. Используйте «пипетку», чтобы выбрать новый цвет любой, отличный от белого. Щелкните по кнопке ОК (рисунок 1.19).
Рисунок 1.19 — Результат изменений
В правила стиля теперь включено новое правило, которое вы можете применять к любым дополнительным словам, фразам или предложениям в абзаце в рамках mainContent div. Просто выберите текст, который хотите изменить, и выделите его, щелкнув по кнопке I на панели Properties. Вы воспользовались панелью Properties, чтобы создать выделенный текст и добавить новые правила CSS к стилям.
Предварительный просмотр страниц в браузере
Выбрав Preview/Debug (Просмотр и отладка в браузере) в окне Document (рисунок 1.20), вы сможете выполнить предварительный просмотр в браузере.
Рисунок 1.20 — Команда Preview
Поздравляем! Вы создали свою первую веб-страницу в Dreamweaver (рисунок 1.21): изменили текст и цвета, добавили изображения и новые правила CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере.
Рисунок 1.21 — Итоговая веб-страница
Ответьте на контрольные вопросы.
- Как изменить цвет фона в боковой панели?
- Какие два действия следует выполнить в первую очередь при создании новой страницы используя макет CSS?
- Назовите и кратко опишите четыре режима отображения Dreamweaver, которые имеются в окне Document.
- Чем отличаются режимы All и Current панели Styles CSS?
- Что произойдет, если вы будете переключаться между HTML и CSS на панели Properties? Зачем переключать режимы?
Контрольное задание
- Согласно своему варианту, разработайте структуру для веб-сайта.
- Подберите материал для своего веб-сайта.
- Реализуйте первую страницу своего веб-сайта.
Требования к веб-странице:
- Использовать один заголовок (h2, h3, h4…).
- Использовать графический фон для заголовка.
- Использовать как минимум 2 изображения.
- Применить форматирование к тексту (курсив, полужирный…).