Как сделать кнопку в dreamweaver cc

Обновлено: 04.07.2024

Сегодня мы с вами познакомимся с программой для создания дизайна сайта, так же его редактирования 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 .

По аналогии с предыдущими ячейками, оформите среднюю ячейку таблицы (черный цвет – для фона и желтый цвет – для текста).

В итоге должно получится вот такое чудо:

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

Если Вам, как и мне интересно постоянно изучать новое подписывайтесь на мой канал и давайте учится вместе!

В ранних версиях была кнопка листик с плюсом, здесь же ее нет.. Если на выделенной части текста вызвать контекстное меню, потом выбрать "стили CSS" и "Создать" - ничего не происходить, там этого нету. Может кто знает как по другому можно правило CSS создать?

PS"Писать ручками не катит - зачем тогда вообще Dreamweaver, notepad++ и флаг в руки. "

Оценить 17 комментариев

вот тоже не знаю, зачем дримвивер, если есть notepad++, sublime, brackets, webstorm) Витали: 21 век, а вы пользуетесь пользуетесь шилом чтобы закрутить гвоздь Витали: Я вам только дал хороший совет, чем нужно пользоваться Сергей: Нужен был бы совет, я бы спросил совета. Без обид, но в конкретном вопросе ожидался конкретный ответ. Спасибо и хорошего вечера Витали: Не стоит упорствовать, послушай мудрых дядь. Ты только вступил на этот скользкий путь, а люди уже прошли по нему. Waliant: Не надо думать что ты самый умный, а все остальные дурачки. Просто прочти релеватные темы снизу этой страницы, и сделай выводы.

Сергей: главное, чтобы голова была на плечах. А инструменты не имеют значения. Сегодня они все хороши. И Дримвивер тоже. AlikDex: слушай, угомонись уже. Угадай где я твою "мудрость" видел). AlikDex: разочарую, ты там же - planet Earth. И не страдай болячками

Вам нужна панель CSS Designer (Shift+F11).
В ней нужно привязать стили к странице. Это может быть внешний CSS файл или вставленный прямо на страницу — вам выбирать. Это делается здесь:

Дальше есть 2 способа:

1. Нажмите + в поле Selectors и впишите нужный вам селектор. На этом всё :) Параметры CSS будут показы справа если кликнуть по селектору.

2. Второй способ более наглядный: кликаете на странице сайта любой элемент, чтобы его выделить и нажимаете + в поле Selectors. И Дримвивер сам предложит вам название селектора для данного элемента, такое чтобы не конфликтовало с другими элементами на странице. Его можно отредактировать если не нравится.

Чаще пользуюсь вторым способом. Очень-очень ускоряет работу с версткой (что бы там ни говорили фанаты "блокнотиков").

Цель : ознакомиться с 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 (Файл => Создать).
Выберите столбец BlankPage (Пустая страница) в диалоговом окне NewDocument (Создать документ).
Выберите HTML в столбце PageType (Тип страницы).
Выберите 2 columnfixed, leftsidebar, headerandfooter (2 колонки фиксированной ширины, боковое поле слева, верхний и нижний колонтитул) в столбце Layout (Макет).
Не изменяйте настройки других опций, установленные по умолчанию, и щелкните по кнопке Create (Создать).
Выберите File => Save (Файл => Сохранить).
После появления диалогового окна Save As (Сохранить как) перейдите в папку lab1. Введите «Umbria.html» и кликните по кнопке Save.

Выбор режима отображения документа

Большинство операций по веб-дизайну мы будем выполнять в окне Design, но помните что у окна Document есть четыре режима отображения (рисунок 1.4):

Design (Дизайн) – представляет страницу в контексте подобном браузеру;
Code (Код) – отображает исходный код страницы;
CodeandDesign (Код и дизайн) – объединяет и режим отображения 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. Щелкните по <h3> и нажмите Delete в селекторе тегов, расположенном внизу окна Document, чтобы удалить тег <h3> (рисунок 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

7. Щелкните по кнопке ОК, чтобы подтвердить изменение. Dreamweaver обнаружит новый цвет на панели Properties. Вам, возможно, потребуется расширить нижнюю границу панели CSS Styles, чтобы увеличить панель Properties и увидеть необходимый цвет.

8. Выберите File => Save.

Вставка графического фона заголовка

В то время как изображения переднего плана вставляются непосредственно на страницу, фоновые изображения размещаются при помощи CSS.

Рисунок 1.15 - Диалоговое окно CSS Rule (Background)

Настройка текста, шрифтов и цветов

1. Поместите курсор в любое место текста заголовка «Путешествуйте по Умбрии с нами».
2. Выберите <h1> в селекторе тегов (рисунок 1.16)

Рисунок 1.16 - Выделенный заголовок h1

Рисунок 1.17 - Диалоговое окно CSS Rule (Type)

Использование панели Properties

Рисунок 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, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере.