2. Быстро измените заголовок файла. Часто, когда мы создаем новые файлы, мы часто игнорируем содержимое заголовка файла. Когда нам нужно изменить его позже, нам часто приходится открывать каждый файл и изменять его отдельно. На самом деле эту работу можно легко выполнить в окне сайта. Откройте «Показать заголовки страниц» в меню «Вид» окна сайта, чтобы файлы в окне сайта отображали заголовок файла вместо исходного имени файла. Заголовок файла по умолчанию — «Документ без названия». Мы можем дважды щелкнуть мышью, чтобы изменить текст по умолчанию на нужный нам заголовок файла. Как показано на рисунке:
3. Быстро создавайте карты сайта. Иногда нам нужно создать карту сайта, содержащую все файловые структуры текущего сайта, и мы не можем найти подходящий метод. Сама Dreamweaver имеет эту функцию. Метод заключается в следующем: откройте команду «Файл» — «Сохранить карту сайта» и введите имя сохраненного файла во всплывающем диалоговом окне. Dreamweaver автоматически создаст сайт в формате .bmp или .png в корневом каталоге. текущего изображения.
2. Техники на этапе верстки страницы
Dreamweaver — это не только хороший инструмент для создания страниц, но он также может выполнять точную верстку и макет страницы. В этом разделе мы познакомим вас с несколькими методами верстки страниц.
1. Откройте вспомогательную форму. Друзья, которые занимались дизайном, особенно надеются на точное позиционирование элементов веб-страницы. Им нравится, что каждый элемент можно расположить точно по их желанию. Функция Grid, поставляемая с Dreamweaver, может помочь реализовать эту надежду. Выполните команду «Просмотр — Редактировать сетку», чтобы включить поддержку координат. Вы можете выбрать отображение сетки или точек и включить функцию «Привязка к сетке». При вставке или добавлении новых элементов в будущем они будут точно расположены в соответствии с вашими настройками.
2. Используйте методы разметки страниц таблицы. Правильное использование функции таблицы в Dreamweaver может легко достичь цели украшения страницы. Ниже я расскажу о нескольких методах.
1) Создайте рамку толщиной 1 пиксель. Некоторые друзья жалуются, что Dreamweaver не может создать однопиксельную рамку таблицы. На самом деле, вы можете создать такую однопиксельную таблицу, осторожно используя панель свойств таблицы. Сначала используйте панель «Объект», чтобы вставить таблицу и определить ширину, высоту, строки и столбцы таблицы. В настоящее время значения CellPad, CellSpace и Border таблицы, вставленной в Dreamweaver, по умолчанию равны 0. Определите для границы таблицы на панели свойств значение 0, для CellPad — значение 5 (при этом между содержимым ячейки и краем ячейки будет сохраняться 5 пикселей), расстояние между ячейками CellSpace будет равно 1 (при этом между ячейками будет оставаться 1 пиксель); предметы). Установите темный цвет фона таблицы (например, #999999) и светлый цвет фона ячеек (например, #FFFFFF). Просто просмотрите его и наблюдайте за эффектом.
2) Импортируйте таблицу данных. Иногда нам необходимо импортировать некоторые таблицы, созданные в файлах Excel, в Dreamweaver. Мы можем сохранить исходные файлы Excel в виде текстовых файлов .txt с разделителями-табуляцией. При выполнении вставки — табличная дата в Dreamweaver открывается следующее окно:
После добавления каждого параметра данные можно импортировать в таблицу Dreamweaver.
3) Отформатируйте таблицу. Если вам надоело многократно задавать параметры каждой ячейки, вы можете использовать команду «Формат таблицы» для быстрого форматирования таблицы. Эта команда находится в меню «Команды». Эта команда имеет несколько цветовых схем таблицы. Вы можете выбрать одну из них. автоматически применит цветовую схему к выбранной вами таблице. Как показано на рисунке:
4. Обмен между таблицами и слоями. Некоторым друзьям нравится свободно упорядочивать содержимое своих страниц, но им не нравится, как работают таблицы. Фактически, вы можете использовать гибкие слои, чтобы упорядочить содержимое страницы, а затем преобразовать его в таблицу, когда вы будете удовлетворены. Выберите слой, который хотите преобразовать, и выполните команду «Изменить» — «Преобразовать» — «Слои в таблицу». Как показано на рисунке:
5. Обновите несколько страниц кадров одновременно. Нам необходимо обновить содержимое двух или более других страниц фрейма одновременно при нажатии ссылки. Этого можно добиться с помощью поведения Dreamweaver, выполнив следующие действия.
1) Выделите текст или изображение ссылки.
2) Откройте панель «Поведение» («Поведение») и щелкните знак плюса, чтобы добавить поведение «Перейти по URL-адресу».
3) В диалоговом окне «Перейти к URL-адресу» отображаются все существующие на данный момент окна фреймов. Мы выбираем имя окна соответственно и можем индивидуально настроить содержимое файла, которое будет обновляться в каждом окне. Dreamweaver добавит знак «*» после окна, в котором установлен целевой файл, указывая, что для этого окна фрейма установлен URL-адрес.
4) Нажмите «ОК» после завершения. Когда мы нажмем эту ссылку, содержимое нескольких окон будет обновлено одновременно.
3. Содержание
Как организовать контент быстрее и удобнее — это то, что хочет знать каждый друг. Вы можете знать или не знать следующие советы, но важно то, что при постоянном использовании вы обнаружите его преимущества.
1. Быстрое редактирование этикеток. Друзьям, знакомым с рукописным кодом, часто приходится переключаться в окно кода, чтобы добавить код вручную. Фактически, вы можете быстро вставлять различные HTML-теги с помощью редактора Quick Tag Editor в Dreamweaver. Для этого достаточно щелкнуть панель свойств.
Вставка значка, другое сочетание клавиш — Ctrl+T, оба метода откроют быстрое редактирование тега, вы можете напрямую выбрать нужный тег исходного кода из списка, как показано ниже:
2. Быстро добавляйте рамки изображений. Многие изображения, вставленные на веб-страницы, не имеют границ. Иногда нам нужно добавить к изображениям границы. Для этого не нужно открывать программное обеспечение для обработки изображений. Один из способов — выбрать изображение и напрямую определить границу размером 1 пиксель на панели свойств, что добавит к изображению рамку в 1 пиксель. Другой метод — определить стиль. Мы можем напрямую определить тег img как стиль. с 1 пикселем со всех сторон. Тогда все изображения, вставленные на веб-страницу, будут иметь одинаковую рамку. Как показано на рисунке:
3. Используйте перетаскивание для добавления ссылок. Dreamweaver поддерживает перетаскивание ссылок непосредственно из документа на другие файлы сайта. Мы можем разместить окно сайта и окно документа рядом, как показано на рисунке:
Затем выделите текст, который необходимо связать в документе, откройте панель свойств и укажите «Указать на файл» после адресной строки ссылки на целевой файл в окне сайта, как показано ниже:
4. Как добавить фоновый звук. Многие друзья немного сбиты с толку вставкой некоторых мультимедийных звуковых файлов в Dreamweaver. На самом деле это очень просто. Щелкните вкладку в левом нижнем углу рабочего окна Dreamweaver, откройте панель «Поведение», нажмите знак «+». во всплывающем окне поведения выберите «Воспроизвести звук» и выберите «Можно добавить нужные вам звуковые файлы». Выберите логотип звукового файла в окне документа и нажмите «Параметры» на панели свойств, чтобы установить количество циклов фоновой музыки, автоматическое воспроизведение и другие свойства, как показано на рисунке:
4. Благоустройство
Украшение различных элементов веб-страницы — трудоемкая и не всегда эффективная задача. Следующие советы могут вам немного помочь.
1. Быстро создавайте цветовые схемы. Нам часто необходимо установить цвет текста для каждого статуса ссылки. Некоторые друзья считают, что их чувство цвета не очень хорошее, поэтому они всегда ищут руководства по подбору цветов. Фактически, сам Dreamweaver уже поставляется с некоторыми цветовыми схемами. Откройте команду «Команды-Установить цветовую схему», и мы увидим, что существует множество наборов цветовых схем, каждый из которых определяет цвет фона, цвет текста и цвет каждой ссылки. состояние Вам нужно только выбрать. Достаточно одного вида, см. рисунок ниже:
2. Навыки оформления ссылок CSS. Текстовые ссылки обычно имеют четыре состояния: ссылка, наведение, активное и посещенное. Обычно мы определяем разные цвета и стили для каждого состояния текстовых ссылок. Однако друзья часто обнаруживают, что определенные ими стили при просмотре выглядят не так, как ожидалось. Основная причина заключается в том, что существуют определенные требования к порядку определения ссылок в таблице стилей. Правильный порядок: A:ссылка — A:посещено — A:hover. На самом деле, обычные друзья часто просто хотят, чтобы статус наведения изменился. Небольшая хитрость заключается в том, чтобы не определять стиль ссылки в соответствии с описанным выше методом, а только определять стили статуса a и a:hover, чтобы это произошло. есть только статус наведения. Стиль отличается от других состояний. Метод модификации показан ниже;
3. Создайте соединительный текст и подчеркните разными цветами. Обычный текст ссылки и подчеркивание ссылки имеют один и тот же цвет. Фактически, мы также можем использовать атрибут Border в таблице стилей для замены подчеркивания обычных ссылок, поскольку Border имеет больше параметров и стилей управления, если цвет границы и наш. Цель может быть достигнута за счет различных цветовых определений текста. Например, мы можем определить текст как черный, а подчеркивание как красный в параметре «Граница», как показано ниже;
5. Методы повышения эффективности
Dreamweaver также содержит множество команд, которые позволяют значительно повысить эффективность работы, включая создание библиотечных проектов, использование шаблонов, функцию панели истории и функцию поиска и замены. Здесь я представляю несколько небольших трюков, чтобы продемонстрировать мощь этих команд.
1. Советы по очистке файлов Word. Нам часто приходится конвертировать некоторые файлы Word в файлы HTML, но в результате этого преобразования создаваемые файлы HTML очень велики и содержат много повторяющегося кода. Использование нескольких функций Dreamweaver позволяет легко очистить ненужный код. Сначала откройте HTML-файл, созданный Word, и выполните команду «Очистить HTML Word» в меню «Команды». Программа автоматически определит исходную версию Word и удалит ненужный код. Тем не менее, файл в настоящее время все еще содержит много повторяющегося кода, в основном содержащего большое количество
тегов и. Мы можем снова выполнить команду «Очистить HTML» в меню «Команды», выбрав во всплывающем окне параметр «Конкретные теги». вверх и введите теги span и p, разделенные пробелами. После выполнения команды все теги span и p будут удалены.
Но на данный момент каждый атрибут изображения в файле также содержит атрибуты, подобные v:shapes="_x0000_i1025", и нам все равно нужно очистить эти атрибуты. Откройте панель «Найти и заменить» и установите правила замены, как показано ниже. После выполнения эти атрибуты всех изображений будут очищены. Как показано на картинке;
2. Быстро заменяйте заголовки файлов. Ранее я уже говорил, что вы можете заменить заголовок файла в окне сайта, но вы можете заменить заголовок только одного файла за раз. Мы можем попробовать использовать команду поиска и замены, представленную на предыдущем шаге, для замены заголовков нескольких файлов. файлы одновременно. Обычно заголовки наших вновь созданных файлов имеют название «Документ без названия». Вы можете открыть команду «Правка-Найти и заменить» и выполнить следующие настройки, чтобы заменить все файлы на текущем сайте под названием «Документ без названия» нашими собственными заголовками.
3. Установите формат документа по умолчанию. Хотя описанный выше метод является быстрым, каждый раз, когда мы создаем новый файл, заголовок файла по умолчанию по-прежнему остается «Документ без названия». Потому что при создании нового документа Dreamweaver будет вызывать страницу по умолчанию в качестве формата по умолчанию. Это файл Dreamweaver 4ConfigurationTemplatesDefault.html, чтобы мы могли установить на нашем сайте некоторые унифицированные форматы, например цвет фона. , размер шрифта, заголовок файла и т. д., а затем сохраните его, перезаписав файл Default.html, указанный выше. Когда мы будем создавать новые файлы в будущем, Dreamweaver будет автоматически применять установленный нами формат, что может значительно повысить эффективность работы.
6. Пост-техническое обслуживание
Хорошо, после стольких представлений выше мы овладели некоторыми навыками создания веб-страниц, но будет ли ваша готовая страница больше не содержать ошибок? Все ли ваши ссылки правильные? Хорошо ли работает ваша страница в браузерах? На вашем сайте все еще есть много файлов, которые вам больше не нужны? Многие подобные проблемы все еще существуют, и они связаны с более поздним обнаружением и обслуживанием сайта. Здесь мы представляем еще несколько методов постобнаружения.
1. Обнаружение ссылки. Выполнив команду меню «Файл — Проверить ссылки», Dreamweaver автоматически обнаружит все ссылки на текущем сайте и обнаружит недействительные ссылки, как показано ниже:
Двойной щелчок по обнаруженному результату автоматически откроет соответствующую страницу и приведет к непосредственному обнаружению неправильной ссылки, что очень удобно для нас, чтобы изменить ошибку ссылки.
2. Быстрое обнаружение ненужных файлов. Выполнение команды меню «Сайт — Проверить ссылки» позволяет включить функцию обнаружения файлов ссылок. Мы также можем использовать эту функцию для проверки ненужных файлов на сайте и их удаления. Просто выберите «Особые файлы» в раскрывающемся списке вверху, и все ненужные файлы на сайте будут перечислены ниже. Выберите их все и нажмите клавишу «Удалить», чтобы удалить их.
