1. Справочный анализ
Для профессиональных разработчиков веб-страниц, которые хотят создавать сложные веб-страницы в визуальной среде, Dreamweaver постепенно превратился в инструмент редактирования веб-страниц и стал лучшим выбором для профессионалов при написании веб-страниц. Согласно опросу Macromedia, Dreamweaver в настоящее время имеет более 700 000 пользователей, занимая первое место среди инструментов веб-редактирования по доле, оставляя далеко позади таких конкурентов, как «Adobe GoLive» и «NetObjects Fusion». Поэтому обычно ожидается, что число пользователей Dreamweaver будет продолжать расти.
Учитывая такой ошеломляющий уровень популярности, вполне возможно, что встроенные функции Dreamweaver становятся все более и более многочисленными, богатыми и полными. На этот раз в нашем введении представлены некоторые новые функции, которые предоставляют создателям веб-страниц более быстрый дизайн, более простое кодирование и более интегрированные функции. Без лишних слов, здесь мы покажем, как эффективно использовать некоторые функции Dreamweaver. Ниже приведены двенадцать секретных техник, которые можно разделить на четыре темы. Это: проектирование веб-страниц (Dreamweaver имеет гибкие функции дизайна страниц), использование Dreamweaver с другими продуктами Macromedia (создание анимации и изображений без обращения за помощью), настройка пользовательского интерфейса (наслаждение персонализированным пользовательским интерфейсом) и, наконец, присоединение к Dreamweaver Extensions ( загружать расширенные функции на веб-страницы).
2. Советы по проектированию веб-страниц
Если вы хотите использовать исходный синтаксис HTML для написания веб-страниц слово в слово или использовать стандартизированные окна для визуального оформления веб-страниц, следующие советы могут вам пригодиться.
Совет 1. Сделайте размер веб-страницы более гибким.
Некоторые веб-разработчики называют представленный ниже метод «жидким», но здесь они называют его «методом эластичного расширения». Это метод, который регулирует размер веб-страницы при изменении размера окна браузера посетителя. Поэтому, если окно слишком велико, пустого пространства не будет, если окно слишком маленькое, и оно будет перемещаться вверх и вниз; полосы по краям не появятся. Фактически, большинство простых веб-страниц автоматически регулируют размер страницы в соответствии с размером окна браузера. Однако, если на веб-странице используется много разных фреймов и таблиц, автоматически и точно размер веб-страницы будет затруднён. гибко настраивается. Обычно веб-дизайнеры используют смесь фреймов фиксированной ширины и изображений GIF в качестве интервалов для разработки веб-страниц. Таким образом, независимо от того, используете ли вы Internet Explorer или Netscape Navigator, размер страницы будет фиксированным и не будет увеличиваться. С помощью Dreamweaver 4.0 вы можете легко создавать веб-страницы, которые автоматически и гибко настраиваются. Как это сделать?
★Специальный метод: используйте кнопку на палитре инструментов (палитра объектов), чтобы открыть веб-страницу и переключиться в режим «Вид макета». В это время вы можете увидеть ширину столбца текстового поля. В центре поля над каждым столбцом есть небольшая стрелка раскрывающегося списка. Щелкните маленькую стрелку над столбцом, для которого хотите настроить гибкое отображение. выберите «Установить столбец как сделать автоматическое растяжение столбца». (Установите ширину столбца автоматической настройки, ограниченную одним столбцом). В это время над полем столбца вместо исходного числа появится волнистая линия, указывающая ширину столбца. Dreamweaver автоматически создаст пустое изображение с фиксированным макетом. Это пустое изображение представлено двумя длинными пустыми таблицами над столбцом. Таким образом, макет будет автоматически заполнен, и настройка гибкого макета будет завершена. (Когда вы добавляете пустое изображение в первый раз, появится диалоговое окно с вопросом, хотите ли вы использовать встроенное изображение. Для достижения наилучшего эффекта мы рекомендуем разрешить Dreamweaver автоматически генерировать его, в противном случае вы не сможете для заполнения макета необходимо использовать пустое изображение.)
Совет 2. Создайте личную палитру
Новая «Панель ресурсов» Dreamweaver (панель управления свойствами) — это новый инструмент, который позволяет управлять файлами в соответствии с форматами файлов, такими как изображения, стили и т. д. , при редактировании веб-сайта.
★Специальный метод: при определении нового сайта (нажмите «Сайт: новый сайт») все типы объектов будут автоматически добавлены в соответствующие поля таблицы на «панели ресурсов». Эта недавно добавленная панель управления свойствами «Панель ресурсов» также имеет поле цвета, в котором хранятся все цвета, используемые на вашем веб-сайте, включая цвет текста, цвет фона и цвет гиперссылки. Это цветовая палитра навигации по веб-сайту, адаптированная для пользователей. Просто запустите «Панель ресурсов» (сначала выберите «Окно», а затем нажмите «Ресурсы»), затем нажмите небольшой цветной прокрутку слева, и вы увидите множество вариантов цвета для вашего веб-сайта. Конечно, вы можете применить эти цвета к определенному выделенному тексту. Даже если вы выберете определенный цвет, на экране появится шестнадцатеричное значение плотности цвета и три основных кода цветового контраста (RGB). Если вы хотите уменьшить панель инструментов палитры, вы можете даже добавить в «избранное» палитры только определенные цвета. Просто выделите выбранный цвет и нажмите кнопку «Добавить в избранное» в окне (правая нижняя кнопка), и все готово.
Совет 3. Создание системы навигации по всплывающему меню
Первоначально создание системы навигации по всплывающему меню требовало большого количества синтаксиса и методов JavaScript, но если у вас есть Dreamweaver и Fireworks Studio, вы можете легко и быстро сделать это.
★ Конкретный метод: сначала запустите «Фейерверк», выберите изображение, а затем нажмите «Вставить всплывающее меню» в диалоговом окне «Установить всплывающее меню». Вы можете ввести название элементов (элементов) и нажать. кнопку «Плюс», чтобы добавить товар. Вы можете продолжать выполнять подробные настройки во всплывающем информационном окне, например, устанавливать текст и гиперссылки, которые будут использоваться в проекте. Конечно, вы также можете добавлять подменю и изменять настройки для следующего уровня. По завершении нажмите «Далее», чтобы продолжить настройку различных значений параметров, таких как цвет, шрифт и т. д. После завершения создания меню вы можете просмотреть как синтаксис HTML, так и изображения. Нажмите «Готово» еще раз. В это время, когда мышь переместится на исходную картинку, появится список содержимого системы меню. Затем, когда вы экспортируете созданный файл, «Fireworks» автоматически создаст все файлы HTML, JavaScript и изображения, которые необходимо использовать Dreamweaver.
Совет 4. Заставьте изображения двигаться.
Если у вас одновременно установлены Dreamweaver и Fireworks Studio, вы будете поражены идеальным сочетанием этих двух программ. Даже если вы не являетесь профессиональным дизайнером изображений, возможно, вам захочется изменить некоторые изображения GIF, чтобы сделать их более яркими при разработке веб-страниц. Dreamweaver позволяет создавать анимацию, не обращаясь за помощью.
★Специальный метод: выберите изображение, которое нужно изменить, в стандартном окне, а затем нажмите «Редактировать» в «Инспекторе свойств». Если вы установили Dreamweaver с включенным «Фейерверком», «Фейерверк» является редактором изображений Dreamweaver по умолчанию, и изображения будут автоматически загружаться в «Фейерверк». (Если вы посмотрите внимательно, вы обнаружите, что на экране Fireworks появятся текст и графика, такие как «Редактирование в Dreamweaver», что указывает на то, что вы можете редактировать изображения в Dreamweaver.) Хорошо, теперь нажмите на изображение, которое вы хотите отредактировать в «. Фейерверк» выберите «Изменить выбор анимации Animate». Далее выполните настройки в диалоговом окне «Анимация», выберите количество кадров анимации, направление движения анимации, прозрачность и другие настройки. Вы также можете нажать инструмент «Рамки», чтобы установить скорость движения, и выбрать панель «Объект», чтобы изменить настройки. Если вы хотите экспортировать файл, просто нажмите на панели инструментов «Оптимизировать» и выберите «Анимированный GIF» в качестве типа файла. После завершения «Фейерверк» автоматически экспортирует изображение с оптимизированными настройками, автоматически обновит изображение GIF и отобразит обновленное изображение в Dreamweaver. Нажмите «Просмотр файла в браузере», чтобы просмотреть в браузере только что созданную прекрасную картинку.
Совет 5. Придайте кнопке мигающий эффект.
В Dreamweaver вы можете создать объект кнопки Flash с мигающим эффектом, не используя Flash. Dreamweaver имеет несколько встроенных объектов кнопок Flash, которые могут создавать кнопки различных форм.
★ Конкретный метод: нажмите «Вставить кнопку Flash интерактивных изображений», чтобы увидеть встроенные кнопки. Вы даже можете использовать мышь, чтобы указать на форму кнопки, которую вы хотите использовать в диалоговом окне, а затем посмотреть, как она работает в браузере. С помощью указателя мыши выберите форму кнопки, которая будет использоваться, а затем последовательно введите параметры, такие как текст, шрифт, цвет, гиперссылка и т. д. на кнопке или пользовательское имя файла. Нажмите ОК. Далее будет создан файл в формате «SWF», который будет автоматически импортирован на вашу веб-страницу. Нажмите на готовый файл, и вы увидите свойства файла, отображаемые в «Инспекторе свойств». При отображении атрибутов файла, если вы развернете список атрибутов файла, появится надпись «Воспроизвести». После нажатия вы можете просмотреть эффект мигания кнопки, не открывая браузер.
Совет 6: Создайте плавный текст
Добавить плавный текст на веб-страницу так же просто, как добавить кнопку Flash, которую мы только что представили. Точно так же, не устанавливая Flash, вы можете легко сделать это с помощью новых функций Dreamweaver. Создатели веб-страниц, которые обычно используют синтаксис HTML для написания веб-страниц и не имеют опыта работы с интерактивными медиа, могут легко создавать компактный плавный текст в форме Flash. Эта новая функция может добавить некоторую интерактивность просмотра веб-страниц без проблем с совместимостью. ★ Конкретный метод: нажмите «Вставить интерактивные изображения Flash-текста», а затем один за другим заполните настройки параметров (например, текст, стиль шрифта, цвет шрифта и размер шрифта, эффект которого вы хотите изменить, и т. д.).
Совет 7. Изменение сочетаний клавиш
Dreamweaver позволяет пользователям настраивать интерфейс, и этот дизайн очень гибок. Например, пользователи могут изменять меню, написав программы или самостоятельно добавив объекты. Вам не нужно быть экспертом, чтобы менять сочетания клавиш, поскольку Dreamweaver имеет графический интерфейс под названием «Редактор сочетаний клавиш».
★Специальный метод: просто нажмите «Изменить сочетания клавиш», и в диалоговом окне загрузится список сочетаний клавиш, которые можно изменить, что позволит вам изменить настройки сочетаний клавиш на привычные вам настройки. Чтобы изменить сочетание клавиш, просто используйте раскрывающееся меню панели «Текущий набор и команды», найдите команду, которую вы хотите изменить, среди существующих команд, а затем выберите текущую комбинацию клавиш, она появится в списке сочетаний клавиш. в списке. Кроме того, если вы хотите добавить настройки сочетаний клавиш, вы можете нажать «Плюс», ввести на клавиатуре новую комбинацию клавиш, которую вы хотите использовать, и нажать «Изменить». В то же время вы также можете выбрать сочетание клавиш и нажать «Минус», чтобы удалить сочетание клавиш.
Совет 8. Сброс столбца окна сайта
★ Конкретный метод: просто нажмите «Просмотр столбцов просмотра файлов» в «Окне сайта», чтобы просмотреть размер и внешний вид столбца просмотра сайта. Выберите имя поля и используйте стрелки вверх и вниз, чтобы изменить его размер, или снимите флажок «Показать поле», чтобы скрыть поле. Кроме того, вы также можете добавлять столбцы и создавать свои собственные имена столбцов, нажав кнопку «Плюс». Альтернативно вы можете связать столбец с «Заметкой к проекту», выбрав существующую «Заметку» в раскрывающемся меню.
Совет 9. Просмотрите исходный код веб-страницы.
★ Конкретный метод: когда вы открываете «Справочник по коду Рейли» (ссылка на окно) для проверки свойств или совместимости браузера, в окне по умолчанию будет отображаться «Настройки ссылки» мелким шрифтом. Но если нажать правую кнопку в правом верхнем углу окна (чуть ниже кнопки закрытия), появится ряд раскрывающихся меню, в которых можно выбрать размер шрифта исходного кода (от маленького до среднего и большого). Выбор крупных шрифтов менее «оскорбителен» для глаз, поскольку вам не нужно держать увеличительное стекло, чтобы смотреть на экран при чтении исходного HTML-кода.
Совет 10. Добавьте кнопку Flash.
В совете 5 мы рассказали, как использовать 20 предустановленных типов кнопок для создания кнопок Flash в Dreamweaver. Это метод, не требующий установки каких-либо дополнительных файлов или программ. Ниже приведен еще один метод: установка «Кнопок фейерверка». Это расширение имеет тот же эффект, что и совет 5.
★Специальный метод: перейдите в раздел «Обмен на Dreamweaver» (центр обмена расширениями Dreamweaver), введите в поиск ключевое слово «Расширения InstaGraphics для Dreamweaver», а затем загрузите этот файл размером примерно 577 КБ. Переключитесь на Dreamweaver, выберите «Команды управления расширениями», а затем выберите «Расширение установки файла», чтобы начать установку. После перезапуска Dreamweaver появится шесть новых интересных форматов кнопок, включая «Доску для серфинга» и «Панель маркеров». На данный момент просто используйте команду «Вставить кнопку фейерверка с интерактивными изображениями», чтобы создать классную кнопку. Вы также можете использовать «Команды конвертировать маркеры в изображения» и «Команды конвертировать текст в изображения». Оба вышеуказанных метода могут автоматически запускать «Фейерверк».
Совет 11: Добавьте на веб-страницу функцию «Установить в избранное». ★ Конкретный метод: выполните поиск в разделе «Обмен», и вы сможете найти расширенную функцию «Добавить в избранное». Этот небольшой файл занимает всего 3 КБ, и время загрузки не займет слишком много времени. Затем выполните те же действия, чтобы загрузить его из «Диспетчера расширений» (Команды Управление расширениями, Расширение установки файлов). Затем перезапустите Dreamweaver. Этот недавно загруженный файл расширения добавит в Dreamweaver новую функцию. Если вы добавите функцию «Добавить в мою коллекцию» на свою веб-страницу, то, когда пользователь увидит ваш веб-сайт, он сможет легко добавить ваш веб-сайт в «Мою коллекцию» своего браузера одним щелчком мыши. Кроме того, самое крутое то, что вы также можете настроить название «Моего избранного» и небольшой значок, который будет отображаться перед названием «Мое избранное» (обычно это маленький значок перед «Моим избранным» в IE — значение IE по умолчанию. Если у вас есть небольшой значок, созданный вами, он будет более ярким). Обратите внимание, что эта функция поддерживает только браузеры, использующие IE 4.0 и выше. Просто выберите панель «Поведение» в меню «Windows», затем перейдите в раскрывающееся меню функций IE и щелкните эту функцию, чтобы легко активировать эту интересную функцию.
Совет 12: Супер крутые диаграммы.
Если вы хотите сделать форму, вам все равно придется тратить время на дословное написание исходного кода веб-страницы? Нет необходимости, уже есть готовый способ
: Перейти
!Обменяйтесь и скачайте «Расширение Form Builder». Там есть готовые таблицы, позволяющие мгновенно копировать таблицы, включающие: страну, пол, семейное положение, возрастную группу и другие категории. Перейдите на Exchange, чтобы загрузить этот небольшой (всего 11 КБ) файл, а затем установите его через «Диспетчер расширений» (Команды Управление расширениями, Расширение установки файлов). Затем просто перезапустите Dreamweaver, нажмите «Вставить FormBuilder», и вы найдете расширенную функцию в (Вставить FormBuilder). После нажатия появится диалоговое окно, в котором будут отображены все меню применимых форматов, что действительно удобно.