Используйте Dreamweaver для быстрого редактирования тегов веб-страниц
Автор：Eve Cole
Время обновления：2009-06-01 01:02:43
Интересно, есть ли у вас привычка писать код вручную? Например: если вы хотите вставить в ячейку фрагмент кода CSS или фрагмент кода Javascript, как это можно сделать быстро и удобно?
Хотя Dreamweaver предоставил нам представление кода, нам все равно придется находить его вручную и переключаться туда и обратно. Хотя вы также можете использовать представление кода и представление редактирования для одновременного существования, оно будет занимать половину места на экране, что сделает и без того небольшую область редактирования еще более переполненной. Есть ли лучший способ? Ответ: да.
Давайте возьмем Dreamweaver 8 в качестве примера, предполагая, что макет панели Dreamweaver для всех является макетом по умолчанию. Проверьте, есть ли над панелью свойств ряд маленьких меток. (Если вы не используете MX, тег находится в строке состояния.) Например: если вы создаете новый пустой HTML-документ, небольшой тег выше должен быть <body>. Пожалуйста, посмотрите на картинку ниже:
Место, отмеченное на картинке красной рамкой, и является нашим сегодняшним героем. Давайте сначала посмотрим на «теги переноса». Введите несколько слов на странице, выберите их, выберите «Перенос тегов» в контекстном меню, введите «<strong>» (исключая кавычки) во всплывающем диалоговом окне «Перенос тегов» и нажмите Enter. Выделен ли ранее выделенный текст жирным шрифтом? Перейдите к исходному коду и посмотрите. Окружен ли выделенный текст тегами <strong>? Вы можете попробовать добавить другие теги, например: <a>, <p>. Вы также можете ввести атрибуты непосредственно здесь. Например: <p style="color:#CC0000">. Здесь приведено только общее объяснение. Если у вас есть вопросы, обратитесь к справке Dreamweaver.
Давайте поговорим о том, как применить селектор тегов.
Когда мы сейчас переместим курсор на жирный текст, мы обнаружим, что после <body> есть дополнительный <strong>. Это означает, что существует тег <strong> вне текста, в котором находится курсор, и тег <body> вне тега <strong>. Далее добавим еще одну таблицу, наведем курсор на таблицу и посмотрим структуру тегов. Я считаю, что друзья, обладающие базовыми знаниями HTML, смогут легко его понять.
Предположим, мы теперь хотим вставить таблицу и с помощью CSS переместить ее на 10 пикселей вниз. Сначала вставьте таблицу, а затем переместите курсор в таблицу. На этом этапе вы должны увидеть слова <body><table><tr><td> в селекторе тегов. Затем щелкните правой кнопкой мыши метку таблицы, и вы увидите четыре варианта. Удаляйте теги, редактируйте теги, устанавливайте классы и идентификаторы.
Удалить тег: удалить тег. (Есть специальные теги, которые нельзя удалить. Например: <table>, <tr>, <td>, <body>...)
Редактировать теги: прикреплять атрибуты к тегам, изменять атрибуты и т. д.
Установить класс: прикрепите класс к этому тегу. (т.е. категории CSS)
Установить идентификатор: прикрепите идентификатор к этому тегу. (т. е. идентификатор CSS)
Здесь мы решили отредактировать тег, а затем добавить в конец атрибут style="margin-top:10px", что аналогично обычному способу написания исходного кода. Затем нажмите Enter. Редактирование завершено. Если вы не видите эффект в Dreamweaver, воспользуйтесь браузером для предварительного просмотра.
Есть еще один способ, который вам может понравиться. Выберите «Окно» → «Инспектор тегов». При выборе тега здесь будут отображаться все атрибуты выбранного в данный момент тега. Вы также можете быстро редактировать здесь. Введенные здесь атрибуты не обязательно заключаются в кавычки. После редактирования нажмите Enter для подтверждения.
Здесь мы только рассказываем вам метод и надеемся, что каждый сможет извлечь из него пользу.
