CoffeeCup HTML Editor

Обзор



Содержание сайта
Редакторы кода л.2
CoffeeCup HTML Editor

Содержание

Интерфейс
Строка меню
Панели инструментов
Панель пользователя
Окно ресурсов
Комплектность
Русский язык
Настройки
Создание проекта сайта
Страница проекта
Добавление папок к проекту
Передача проекта на сервер
Конфигурация сервера
Комментарий
Закладки
Цвет тэгов
Разделение экрана
Номера строк
Переход по строкам
Сдвиг текста
Таблицы стилей CSS
Создание выпадающего меню
Вертикальное меню
Отрывки кода
Мета-данные
Новая страница
Шрифт
Выравнивание текста
Перенос строки
Горизонтальная линия
Предварительное форматирование
Вставка символов
Параграф

Ресурсы CoffeeCup
Ссылки
Изображения
Списки
Таблицы
Фреймы
Страница из сети
Просмотр в браузерах
Найти-заменить
Проверка и оценка
О шаблонах

Дополнительно: Разное

Создание выпадающего меню

В программе CoffeeCup HTML Editor (т.е. в платной версии программы) есть возможность создания выпадающих меню, используя Строителя меню.

Примечание: в редакторе CoffeeCup HTML Editor (бесплатная версия программы) Строитель меню работать не будет.

Ранее группа CoffeeCup выпускала бесплатную программу для создания выпадающих меню под названием CoffeeCup Free DHTML Menu Builder, возможности которой были даже несколько шире, чем у Построителя меню CoffeeCup HTML Editor. Но с 2012 г. (с выпуском нового html-редактора) официальное распространение данной программы прекращено.

Подробнее о CoffeeCup Free DHTML Menu Builder

Строитель меню

Для создания CSS-меню в меню Insert выберите CSS Menu Designer.
Появится окно Строителя меню CSS Menu Designer. В левой части окна будет отражаться структура создаваемого меню, в правой части - кнопки по настройке этой структуры.




Если создается новый документ, может появиться окно с предложением сохранить документ перед созданием меню. Сохраните документ (нажмите "да").



Вкладка Menu Designer




Введите название меню. Название лучше ввести латинскими буквами. При вводе названия на русском языке меню будет создано, но оно не будет выпадающим - это будет простое меню с пунктами и подпунктами и шрифтом синим подчеркнутым (т.е. это оформление ссылки по умолчанию). Если такое меню Вас устраивает - можно назвать меню по-русски.

В левой части окна отражается структура создаваемого меню, в правой части - кнопки по настройке этой структуры, где  вносятся пункты меню, подпункты, подпункты подпунктов и т.д.

Нажмите кнопку Add Root Item. Первый пункт меню (под названием Untitled1) появится и слева, и внизу в разделе Text. Замените Untitled1 на свое название.
Определите, на какую страницу будет отсылать данный  пункт меню.

Чтобы создать подпункт меню, щелкните по Add Subitem. Нажимая на кнопку Add Sibling, к одному пункту меню можно добавить много подпунктов. Определяйте для каждого подпункта меню ссылки на страницы
(подпункт меню можно создать также, щелкнув по названию пункта , а затем - по кнопке  Add Subitem).

Аналогичным образом для подпунктов создаются подпункты подпунктов и так далее.

Кнопка  Preview (внизу) - для предварительного просмотра создаваемого меню.

Вкладка Menu Colors

 

Вкладка предназначена для выбора цвета.

Background Color - цвет фона
Mouseover Background Color - цвет фона при наведении курсора
Font Color - цвет шрифта
Mouseover Font Color - цвет шрифта при наведении курсора
Border Color - цвет рамки меню

В разделе Submenu определяются цвета для подпунктов.
При выборе Use Main Menu Colors цвета пунктов и подпунктов меню будут одинаковыми.


Вкладка Options




На вкладке определяется ориентация меню (вертикальная или горизонтальная), расстояние от верха и левого края страницы (Margin Top, Margin Left), задается шрифт надписей.
Поставив галочку напротив строки Use fixed width for menu items, можно задать ширину меню в пикселях.

Определив параметры меню (и сделав предварительный просмотр, нажав Preview), щелкните ОК.

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

Удалите код прежнего меню (если оно было), нажмите ОК.

Редактор снова задаст вопрос: сохранять (Save) или не сохранять (Don't Save) созданное меню?

Сохраните, если в дальнейшем рассчитываете вносить в него какие-то изменения. Такое сохраненное меню можно при необходимости  снова открыть в построителе меню (щелкнув по кнопке Open Menu), изменить и вставить на страницу, удалив код прежнего меню.

После щелчка по Save или по Don't Save код меню будет вставлен в код страницы (т.е. меню будет вставлено на страницу). HTML-код меню должен располагаться между тэгами <body> и </body>, код можно редактировать - удалять или добавлять пункты или подпункты, создавать ссылки и пр.

У всей продукции группы CoffeeCup есть одно общее свойство - она очень демократична, т.е. проста в использовании для любых групп пользователей, в том числе и не имеющих больших навыков по веб-строительству. В данном случае программа сама сделает всю основную работу - поможет в визуальном режиме оформить меню и создаст код JavaScript, который определяет поведение меню. При размещении созданного меню на веб-странице в Интернет нужно переправить (используя FTP) все компоненты, созданные программой, в т.ч. и все скрипты.

Далее: Пример вертикального меню



О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru