Для профессиональных разработчиков веб-страниц, которые хотят создавать сложные веб-страницы в визуальной среде, Dreamweaver постепенно появился на рынке инструментов для редактирования веб-страниц и стал лучшим выбором для профессионалов при написании веб-страниц. Судя по текущей ситуации, можно сказать, что встроенные функции Dreamweaver становятся все более обильными, богатыми и полными. Здесь я хотел бы представить вам несколько советов по использованию версии 4.0.
1. Сделайте веб-страницы более гибкими. Некоторые веб-разработчики называют описанный ниже метод гибким, но я называю этот метод эластичным (техника гибкого расширения). Это метод, позволяющий регулировать размер веб-страницы при изменении размера окна браузера посетителя. Поэтому, если окно слишком велико, пустого места не будет, а если окно слишком маленькое, вверх и вниз. Полоса перемещения вниз не появится на краю. Фактически, большинство простых веб-страниц автоматически регулируют размер страницы в соответствии с размером окна браузера. Однако, если на веб-странице используется много разных фреймов и таблиц, автоматически и точно размер веб-страницы будет затруднён. гибко настраивается. Обычно веб-дизайнеры используют сочетание рамок фиксированной ширины и изображений GIF в качестве интервалов для разработки веб-страниц. Таким образом, независимо от того, используете ли вы Internet Explorer или Mac, размер страницы будет фиксированным и не будет увеличиваться. С помощью Dreamweaver 4.0 вы можете легко создавать веб-страницы, которые автоматически и гибко настраиваются. Как это сделать?
Откройте веб-страницу с помощью кнопок на палитре «Объект» и переключитесь в режим «Макет». В это время вы можете увидеть ширину столбца текстового поля. В центре поля над каждым столбцом есть небольшая стрелка раскрывающегося списка. Выберите маленькую стрелку над столбцом, для которого вы хотите настроить гибкое отображение. затем выберите «Сделать отображение столбца гибким» (Make Column Autostretch). (Установите автоматическую регулировку ширины столбца только одним столбцом). В это время над полем столбца вместо исходного числа появится волнистая линия, указывающая ширину столбца. Dreamweaver автоматически создаст пустой файл изображения с фиксированным макетом. Этот пустой файл изображения представлен двумя длинными пустыми таблицами над столбцами. Таким образом, макет будет автоматически заполнен, и настройка гибкого макета будет завершена. (Когда вы добавляете пустой файл изображения в первый раз, появится диалоговое окно с вопросом, хотите ли вы использовать встроенный файл изображения. Для достижения наилучшего эффекта я рекомендую разрешить Dreamweaver автоматически сгенерировать его, в противном случае вы не нужно использовать пустой файл изображения для заполнения макета.)
2. Создайте персонализированную цветовую палитру Новая панель «Ресурсы» Dreamweaver 4.0 — это новый инструмент, позволяющий управлять файлами по типам, например изображениям, шаблонам и т. д. ., при редактировании веб-сайта. Когда вы определяете новый веб-сайт (Выбрать сайт · Новый сайт), все типы компонентов будут автоматически добавлены в соответствующие поля на панели «Ресурсы». Эта новая панель «Ресурсы» также имеет поле цвета на панели управления свойствами, в котором хранятся все цвета, используемые на вашем веб-сайте, включая цвета текста, цвета фона и цвета ссылок. Это цветовая палитра, ориентированная на веб-сайты и адаптированная для пользователей. Просто активируйте панель «Ресурсы» (сначала выберите «Окно», затем «Ресурсы»), затем выберите небольшую цветную полосу прокрутки слева, и вы увидите множество вариантов цвета для вашего веб-сайта. Конечно, вы можете применить эти цвета к определенному выделенному тексту. Даже когда вы выбираете цвет, на экране появится шестнадцатеричное значение цвета и соответствующий трехцветный код (RGB). Если вы хотите уменьшить панель инструментов палитры, вы даже можете добавить в избранное только определенные цвета. Просто выделите выбранный цвет, выберите в окне кнопку «Добавить в избранное» (правая нижняя кнопка), и все готово.
3. Создание системы навигации по всплывающему меню Первоначально создание системы навигации по всплывающему меню требовало некоторых навыков синтаксиса JavaScript, но если у вас установлен Dreamweaver/Fireworks Studio, это можно сделать быстро. Сначала запустите Fireworks, выберите изображение, а затем выберите «Вставить·Всплывающее меню» в диалоговом окне «Настроить всплывающее меню». Вы можете ввести имя элементов и нажать кнопку «Плюс», чтобы добавить проект. Вы можете продолжать выполнять подробные настройки во всплывающем окне сообщения, например, задавать текст и ссылки, которые будут использоваться для элемента. Конечно, вы также можете добавлять подменю и изменять настройки для следующего уровня. По завершении выберите «Далее», чтобы продолжить настройку таких параметров, как цвета, шрифты и т. д. После завершения создания меню вы можете просмотреть синтаксис HTML и просмотреть изображение. Затем выберите Готово. В это время, когда мышь переместится к исходному шаблону, появится список содержимого системы меню. Затем, когда вы экспортируете созданный файл, Fireworks автоматически сгенерирует все файлы HTML, JavaScript и изображения, необходимые Dreamweaver.
4. Заставьте файл изображения двигаться!
Если у вас одновременно установлен Dreamweaver/Fireworks Studio, вы будете поражены идеальным сочетанием этих двух продуктов. Даже если вы не профессиональный графический дизайнер, вам все равно захочется изменить некоторые файлы изображений GIF, чтобы сделать их более яркими при разработке веб-страниц. Dreamweaver позволяет создавать анимацию, никого не спрашивая! Выберите изображение, которое хотите изменить, в стандартном окне, а затем нажмите кнопку «Редактировать» в инспекторе свойств. Если Fireworks включен в вашу установку Dreamweaver, Fireworks является редактором изображений Dreamweaver по умолчанию, и изображения будут автоматически загружаться в Fireworks. (Если вы посмотрите внимательно, вы обнаружите, что на экране Fireworks появятся текст и графика, такие как «Редактирование в Dreamweaver», указывая на то, что вы можете редактировать изображения в Dreamweaver.) Хорошо, теперь выберите изображение, которое нужно редактировать в Fireworks, и выберите «Изменить». Анимировать · Анимировать выделение. Далее выполните настройки в диалоговом окне Анимация, выберите количество кадров анимации, направление движения анимации, прозрачность и т.д. Вы также можете выбрать панель инструментов «Кадры», чтобы установить скорость движения, и выбрать панель «Объект», чтобы изменить настройки. Чтобы экспортировать файл, просто выберите панель инструментов «Оптимизировать» и выберите «Анимированный GIF» в качестве типа файла. После завершения Fireworks автоматически экспортирует изображение с оптимизированными настройками, автоматически обновит файл изображения GIF и отобразит обновленный файл изображения в Dreamweaver. Выберите «Просмотр файла в браузере», чтобы просмотреть в браузере только что созданное прекрасное изображение!
5. Придайте кнопке мигающий эффект. В Dreamweaver вы можете создать объект Flash-кнопки с мигающим эффектом без использования Flash-программы. Версия 4.0 имеет несколько встроенных объектов Flash-кнопок, которые могут создавать кнопки разных форм. Выберите «Вставить·Интерактивные изображения·Кнопка Flash», чтобы просмотреть доступные встроенные кнопки. Вы даже можете использовать мышь, чтобы указать на форму кнопки, которую вы хотите использовать в диалоговом окне, а затем посмотреть, как она работает в браузере. Используйте курсор мыши, чтобы выбрать форму кнопки, которую вы хотите использовать, а затем последовательно введите параметры, такие как текст, шрифт, цвет, ссылка и т. д. на кнопке или настраиваемое имя файла. Нажмите ОК. Затем будет создан SWF-файл, который автоматически разместится на вашей веб-странице. Нажмите на готовый файл, и вы увидите свойства файла, отображаемые в инспекторе свойств. При отображении атрибутов файла, если вы развернете список атрибутов файла, появится кнопка «Воспроизвести». После ее выбора вы можете просмотреть эффект мигания кнопки, не открывая браузер.
6. Создайте плавный текст. Добавить плавный текст на веб-страницу так же просто, как добавить кнопку Flash, которую я только что представил. Аналогично, вам не нужно устанавливать Flash: вы можете легко сделать это с помощью новых функций Dreamweaver 4.0. Создатели веб-страниц, которые обычно используют синтаксис HTML для написания веб-страниц и не имеют опыта работы с интерактивными мультимедиа, могут легко создавать компактный плавный текст в форме Flash. По данным Macromedia, 97% пользователей Интернета могут просматривать веб-страницы с эффектами Flash, поэтому эта новая функция может добавить некоторую интерактивность просмотру и читателям веб-страниц, не создавая проблем с совместимостью. Выберите «Вставка» · Интерактивные изображения · Flash-текст, а затем один за другим заполните настройки предпочтений (например, текст, стиль шрифта, цвет шрифта, размер шрифта и т. д., эффект которого вы хотите изменить).
7. Изменение сочетаний клавиш Dreamweaver позволяет пользователям настраивать интерфейс. Этот дизайн очень гибок. Например, пользователи могут изменить меню, написав программы или добавив объекты. Вам не нужно быть экспертом, чтобы изменить сочетания клавиш, поскольку Dreamweaver имеет графический интерфейс под названием «Редактор сочетаний клавиш». Просто выберите «Редактировать · Сочетания клавиш», и в диалоговом окне загрузится список сочетаний клавиш, которые можно изменить. позволяя вам быстро изменить ключ на значение настройки, к которому вы привыкли. Чтобы изменить сочетание клавиш, просто используйте раскрывающиеся меню списка «Текущий набор» и «Команды», найдите команду, которую вы хотите изменить, среди существующих команд, а затем выберите текущую комбинацию клавиш. Она появится в списке быстрых клавиш. в списке ключей. Кроме того, если вы хотите добавить настройку быстрой клавиши, вы можете нажать кнопку «Плюс», ввести новую клавишу быстрого доступа, которую вы хотите использовать на клавиатуре, и выбрать «Изменить». В то же время вы также можете выбрать сочетание клавиш и выбрать клавишу удаления (Минус), чтобы удалить сочетание клавиш.
8. Сбросьте ширину столбца в окне «Сайт». Просто выберите «Просмотр · Столбцы просмотра файлов» в окне «Сайт», чтобы настроить размер и представление ширины столбца при просмотре представления «Сайт». Выберите столбец с именами и используйте стрелки вверх и вниз, чтобы изменить размер, или снимите флажок «Показать поле», чтобы скрыть столбец. Кроме того, вы также можете добавлять столбцы, нажав кнопку «Плюс», и создавать свои собственные имена столбцов. Кроме того, вы можете связать столбец с заметкой разработчика, выбрав существующую заметку в раскрывающемся меню.
9. Прочтите исходный файл веб-страницы. Когда вы открываете Справочник по коду O'Reilly (Окно · Справочник) для проверки свойств или совместимости браузера, в окне по умолчанию настройки ссылки будут отображаться мелким шрифтом. Но если нажать правую кнопку в правом верхнем углу окна (чуть ниже кнопки закрытия), появится ряд раскрывающихся меню, в которых можно выбрать размер шрифта исходного документа (маленький, средний и большой). . Выбор крупных шрифтов менее вреден для глаз, поскольку вам не нужно держать увеличительное стекло, чтобы смотреть на экран при просмотре исходного HTML-файла!
10. Добавьте новую кнопку Flash. Выше я научил вас, как использовать 20 предустановленных типов кнопок для создания кнопок Flash в Dreamweaver. Этот метод не требует установки каких-либо дополнительных файлов или программ. Ниже представлен еще один метод: установка кнопок Fireworks. Эта расширенная функция имеет тот же эффект, что и совет 5. Перейдите на сайт Exchange for Dreamweaver (центр обмена расширениями Dreamweaver), введите для поиска ключевое слово «Расширения InstaGraphics для Dreamweaver», а затем загрузите этот файл размером 577 КБ. Переключитесь в Dreamweaver, выберите «Команды·Управление расширениями», а затем выберите «Файл·Установить расширение», чтобы начать установку. После повторной активации Dreamweaver появится шесть новых и интересных типов кнопок, включая «Доску для серфинга» и «Панель маркеров». На данный момент просто используйте команду «Вставить · Интерактивные изображения · Кнопка фейерверка», чтобы создать классную кнопку. Вы также можете использовать команды · Преобразовать маркеры в изображения и команды · Преобразовать текст в изображения. Оба вышеуказанных метода могут автоматически запускать Fireworks.
11. Добавьте функцию «Установить в избранное» на веб-страницу и выполните поиск в Exchange. Вы можете найти функцию расширения «Добавить в избранное». Этот небольшой файл занимает всего 3 КБ, и время загрузки не займет слишком много времени. Затем выполните те же действия, чтобы загрузить его из диспетчера расширений (Команды · Управление расширениями, Файл · Установить расширение). Затем повторно активируйте Dreamweaver. Этот недавно загруженный файл расширения добавит в Dreamweaver новую функцию. Если вы добавите на свою веб-страницу функцию «Добавить в избранное», то когда пользователь Интернета посетит ваш сайт, он сможет легко добавить ваш сайт в избранное своего браузера одним щелчком мыши (или в личные закладки). Кроме того, вы также можете настроить имя избранного ярлыка и небольшой значок, который будет отображаться перед именем избранного ярлыка (как правило, маленький значок перед любимым ярлыком в IE является значением IE по умолчанию. Если вы иметь свой собственный небольшой значок намного круче. Обратите внимание, что эта функция поддерживается только браузерами IE 4.0 и выше. Просто выберите панель «Поведение» в меню Windows и выберите этот параметр в раскрывающемся меню функций IE.
12. Если вы. Хотите создатьклассную
диаграмму, вам все еще придется тратить время на набор исходного кода веб-страницы? Уже есть готовая форма, которую можно загрузить с Exchange! Расширение Form Builder имеет готовую форму, которая позволяет вам это сделать? чтобы мгновенно скопировать форму, содержащую такие поля, как страна, пол, семейное положение, возрастная группа и другие категории. Загрузите этот небольшой (всего 11 КБ) файл с Exchange, а затем используйте диспетчер расширений. Установите его (Команды · Управление расширениями, Файл). ·Установить расширение). Затем просто повторно активируйте Dreamweaver и выберите «Вставить·FormBuilder», и вы найдете файл расширения в (Вставить·FormBuilder). После выбора появится диалоговое окно со всеми применимыми меню формата.