Dreamweaver Super Tips Текстовые эффекты

Цель приложения: создание специальных эффектов для текста.

Программное обеспечение: Dreamweaver MX.

Сложность операции: ★★☆☆☆

Наш широко используемый инструмент для создания веб-страниц Dreamweaver MX может не только создавать веб-страницы, но также использовать фильтры CSS для выполнения простых специальных эффектов над текстом или текстом. фотографии. Давайте рассмотрим несколько примеров, чтобы увидеть, как создавать текст со спецэффектами в Dreamweaver.

Halo Word

сначала запускает Dreamweaver, вставляет таблицу 1×1 в новый документ, устанавливает границу на 0, а затем вводит текст, который необходимо изменить.

Нажмите «Дизайн → Стиль CSS» на плавающей панели справа, чтобы открыть эту плавающую панель.

Четыре кнопки в правом нижнем углу панели: добавление, создание, редактирование и удаление стилей CSS.

Примечание. В Dreamweaver фильтры CSS можно использовать только для объектов с ограничениями по площади, таких как таблицы, ячейки, изображения и т. д., но нельзя использовать непосредственно для текста, поэтому нам нужно поместить текст, который необходимо добавить, с помощью специальных эффекты в таблице заранее, а затем примените к таблице стили CSS, чтобы создать специальные эффекты для текста.

Рисунок 1. Создание нового стиля CSS.

Нажмите кнопку «Новый стиль CSS», и появится диалоговое окно, показанное на рисунке 1.

Выберите «Создать собственный стиль» для элемента «Тип», выберите «Только для этого документа» для «Определено в» и нажмите «ОК», чтобы открыть диалоговое окно определения стиля CSS (рис. 2). На панели типов мы можем это сделать. определите шрифт, размер шрифта, цвет и другое содержимое. В этом примере мы выбираем официальный шрифт, размер 50 пикселей и белый цвет.

Рисунок 2. Чтобы определить стили CSS

для создания текстовых эффектов, наиболее важными являются настройки на панели расширений (рис. 3). Все фильтры CSS перечислены в фильтре в разделе «Визуальные эффекты». Выберите фильтр «Свечение», который можно сделать. текст имеет эффект светящихся краев. Синтаксический формат фильтра «Свечение»: Glow(Color=?, Strength=?), который имеет два параметра: Цвет определяет цвет ореола. Вы можете использовать шестнадцатеричные коды, например ffffff, или такие слова, как Red и Yellow. Обозначает; Сила представляет интенсивность света в диапазоне от 0 до 255. В этом примере мы устанавливаем цвет красный, интенсивность света 8, а затем ОК.

Рисунок 3. После установки фильтра свечения

мы применим этот стиль CSS к таблице. Переместите курсор к ячейке, щелкните метку в левом нижнем углу

окна

Мы не видим изменений в окне документа. Нажмите клавишу F12 для предварительного просмотра в IE, и эффект появится (рис. 4).

Рисунок 4. А как насчет эффекта ореола слов

? Он не уступает эффекту фильтра в Photoshop. Размещение нескольких слов со специальными эффектами на веб-странице сделает веб-страницу намного красивее, и мы также можем использовать клавишу PrintScreen для захвата экрана, а затем вставить и сохранить его в программе рисования, чтобы сделать из него отдельное изображение.

теневых слов

, которые могут создавать теневые эффекты на тексте, а именно Drowshadow и Shadow. Эффекты, которые они создают, немного различаются.

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

Синтаксис фильтра Drowshadow следующий: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).

Среди них Color представляет цвет тени, выраженный в виде шестнадцатеричного числа; OffX и OffY соответственно представляют величину отклонения тени от положения текста в пикселях. Положительное значение — логическое значение, 1 — создание теней для всех непрозрачных объектов; elements, 0 Представляет создание видимых теней для всех прозрачных элементов.

Рис. 5. Эффект теневого слова.

Например, если для фильтра установлено значение DropShadow (Color=6699cc, OffX=2, OffY=2, Positive=1), эффект будет таким, как показано на рис. 5.

слова-маски

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

Вставьте таблицу 1×1 в окно документа, щелкните метку в левом нижнем углу окна документа, чтобы выделить всю таблицу, выберите подходящее изображение на фоновом изображении инспектора свойств (как показано на рисунке 6) и затем введите необходимый текст.

Рисунок 6.

Далее мы добавляем в ячейку фильтр «Маска», шаги аналогичны предыдущим двум примерам. В фильтре выберите Mask (Color=?). Этот параметр определяет цвет маски. Выбираем белый.

Примечание. Выбор цвета текста в этом примере не важен, поскольку в конечном результате текст будет пустым и цвет отображаться не будет.

Рис. 7. После установки эффекта слова-маски

примените этот стиль CSS к ячейке, а затем нажмите клавишу F12, чтобы увидеть эффект (рис. 7).

Примечание. Фоновое изображение добавляется ко всей таблице и соответствует метке, а стиль CSS добавляется к ячейке и является меткой. Не ошибитесь.

динамические

символы, нам нужно использовать фильтр «Размытие», который используется для создания эффекта размытия. Его синтаксический формат — Blur(Add=?, Direction=?, Strength=?). Параметр Add представляет собой логическое значение. Вообще говоря, когда фильтр используется для изображений, он принимает значение 0, а когда он используется для текста, он принимает 1. Направление представляет направление размытия, а единица измерения — угол; значение движения размытия, единица измерения — пиксели. Например, если мы определим Blur(Add=1, Direction=90, Strength=150), вы увидите эффект, показанный на рисунке 8 в предварительном просмотре.

Рисунок 8. Эффект динамического слова.

Фактически, многие фильтры в CSS также можно использовать для изменения изображений, например фильтр «Размытие», который может создавать эффект размытия изображений. Если мы умеем применять эти фильтры, иногда мы можем создавать довольно хорошие эффекты изображения без профессионального программного обеспечения для обработки изображений.