В своей недавней серии из трех статей Шейн Моррис познакомил вас с Microsoft Expression Blend. В следующих двух статьях я расскажу о своем родственном продукте Microsoft Expression Web. Сейчас самое время взглянуть на каждый из этих продуктов, так как Expression 4 был запущен 7 июня. Прежде всего, важно отметить, что хотя Expression Web является выходом Microsoft на арену HTML-редакторов, он никоим образом не связан с сервером Microsoft. побочные продукты. Независимо от того, создаете ли вы простой HTML, ASP.NET или PHP, Expression Web предоставляет поддержку каждому из них как первоклассным гражданам, поэтому я призываю вас читать дальше. В настоящее время общепризнанно, что веб-стандарты — это путь вперед. для Интернета. Создание общепринятых стандартов позволяет нам создавать сайты, которые надежно работают с широким спектром клиентов и устройств. Есть и другие преимущества, такие как более быстрая загрузка — макеты CSS почти всегда выигрывают над макетами на основе таблиц — и лучшая доступность. Одним из самых больших препятствий для разработки на основе стандартов по сравнению с прошлым годом было отсутствие согласованного инструментария. Несмотря на то, что поставщики браузеров исправили свои действия, нам, разработчикам, было все еще легко создавать любой старый HTML и просто надеяться, что он работает. Сеть выражений развивалась с нуля с упором на стандарты. Он предлагает собственный стандартизированный механизм рендеринга, который отличается от механизма Trident, используемого в Internet Explorer, а также такие функции, как IntelliSense и встроенные средства проверки совместимости, позволяющие следить за ходом разработки. На протяжении оставшейся части этой серии статей я буду знакомить вас с этими функциями по мере того, как мы будем проходить этапы создания, разработки, тестирования, публикации и создания отчетов на HTML-странице. Вы можете скачать бесплатную пробную версию Expression Web 4 с сайта Microsoft . После того, как вы закончите со статьей, обязательно проверьте, что вы узнали в нашей статье викторины , спонсируемой Microsoft.
Давайте начнем с самого начала, с возможностей разработки HTML в Expression Web.
Первым шагом к разработке на основе стандартов является определение того, какой именно стандарт вы хотите использовать. Хотя это кажется очевидным, этот шаг часто затеняется в начале проекта, в то время как мы с нетерпением сосредоточены на написании первой строки «полезного» кода. Чтобы сообщить браузеру, на какой стандарт вы ориентируетесь, нужно использовать так называемый тип документа или объявление типа документа. Например, тип документа для XHTML 1.1 выглядит следующим образом:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Doctype для HTML5 намного проще:
<! DOCTYPE html>
Используемый вами тип документа будет влиять на то, как браузеры отображают вашу страницу. Отсутствие типа документа (или наличие неверного) может полностью изменить макет вашей страницы, так как браузер будет использовать режим причуд вместо режима стандартов для интерпретации вашего кода. Как следует из названия, вы можете ожидать, что рендер будет включать несколько причуд, если вы пойдете по этому пути. Изменить тип документа в Expression Web очень просто, особенно потому, что вам не нужно запоминать их все. Просто выделите существующий тип документа в вашей разметке, затем нажмите Ctrl + Enter . Вам будет показано всплывающее окно, подобное показанному на рисунке 1, «IntelliSense для DocTypes» .
Более нового типа документа HTML 5 еще нет, но вы можете легко добавить его, выбрав опцию . Вы также можете изменить тип документа по умолчанию для новых документов, выбрав « > « > « Разработка» .
По мере ввода в области кода многие редакторы HTML будут предлагать раскрывающиеся подсказки для тегов и атрибутов. В мире Microsoft эта функция известна как IntelliSense. HTML IntelliSense в Expression Web является особенно мощным, поскольку он понимает стандарт, на который вы нацеливаетесь. Как и браузер, Expression Web использует объявление doctype вверху страницы, чтобы определить, на какой стандарт вы нацеливаетесь, и предоставляет помощь. соответственно. IntelliSense будет работать без доктайпа, но он не будет таким точным, и, что более важно, ваша страница будет менее вероятно отображаться в разных браузерах.
Если вы чувствуете, что IntelliSense работает против вас, вероятно, так оно и есть. Убедитесь, что у вас есть правильный тип документа, указанный в верхней части документа, и что тег или атрибут, который вы пытаетесь использовать, действителен в этом месте документа.
Как вы можете видеть на рисунке 2, «Фильтрация атрибутов IntelliSense» , где я использую тип документа XHTML 1.1 для своего документа, Expression Web не предлагает target атрибут. Таким образом, IntelliSense отлично подходит для мягких напоминаний о том, что вы можете поместить куда.
Как бы полезна она ни была, реальность такова, что IntelliSense доходит только до нас — это, конечно, не должно быть нашей последней проверкой. Обычный рабочий процесс проверки будет состоять в том, чтобы регулярно загружать вашу страницу в службу проверки W3C , однако это довольно утомительное ручное задание, которое мы бы предпочли автоматизировать. Чтобы сделать эти проверки постоянным компонентом вашей разработки, Expression Web включает встроенная проверка совместимости. Этот инструмент аналогичен инструменту W3C, упомянутому выше, но напрямую интегрирован в редактор кода. Неподдерживаемые атрибуты, отсутствующие атрибуты и плохо вложенные теги подсвечиваются встроенным средством проверки совместимости, как показано на рисунке 3, «Встроенная проверка совместимости» , Если вы наведите курсор мыши на любую из ошибок, вам будет предоставлена дополнительная информация о том, что именно не так.
В дополнение к этим советам вы можете увидеть полную картинку вашего документа в правом нижнем углу экрана.
Пример, показанный на рисунке 4, «Символы проверки документов» показывает, что, хотя в нашем документе есть ошибки совместимости (первый значок), код синтаксически действителен (второй значок). Если бы в нашем документе был неправильно сформированный или несовпадающий тег, второй значок также отображал бы состояние ошибки. Нажатие на любой из этих значков приведет нас прямо к ошибке, которая их вызвала. Полезно привыкать регулярно проверять эти значки во время кодирования, чтобы можно было быстро исправить любые ошибки. Проверка совместимости документов особенно полезна при работе с существующими документами и при внедрении кода сторонних разработчиков. . Наконец, вы можете запустить проверку всех документов на вашем сайте, выбрав пункт меню « > « .
Одна из вещей, которые мне больше всего нравятся в работе в Интернете, — это скорость, с которой наша отрасль меняется и совершенствуется. Недостатком этого является то, что я часто смотрю на код, который я написал не так давно, и искажаю его. Другой распространенный сценарий, в котором я хочу внести общие усовершенствования, — это когда я наследую код, который либо не соответствует стандарту, либо не соответствует стандарту. не согласуется с тем, как проект уже построен. Оба сценария часто можно облегчить с помощью набора простых действий поиска и замены; однако типичные текстовые инструменты поиска и замены не всегда достаточно мощные. Expression Web действительно сияет в этой области благодаря своим регулярным выражениям и функциям поиска на основе тегов. Нажмите Ctrl + F и переключитесь на вкладку HTML-теги, чтобы увидеть диалоговое окно, показанное на рисунке 5, «Диалог поиска и замены HTML» .
Теперь перейдем к поиску любых тегов <img> на нашем сайте, у которых нет атрибутов alt .
- Выберите
imgв поле « Найти тег» . - Нажмите .
- Выберите Новое правило… , затем Без атрибута , затем alt .
- Нажмите .
- Нажмите .
Просто представьте, что вы пишете для этого регулярное выражение! Чтобы быть справедливым, пример, который я только что использовал, был бы найден средством проверки совместимости, но он служит для иллюстрации того, насколько мощна эта функция. Он действительно вступает в свои права с более сложными правилами, в том числе основанными на нескольких уровнях вложенности тегов. Когда я создаю форму, я обычно хочу, чтобы все мои поля были внутри <ul> который имеет class fields , Поиск форм, нарушающих это личное правило, становится довольно простым с помощью функций поиска и замены в HTML , как показано на рисунке 6, «Правила поиска и замены в HTML» .
С нашей разметкой пришло время применить некоторые стили с помощью CSS.
Если вы новичок в CSS, вы можете использовать панели инструментов, с которыми вы знакомы, чтобы быстро выполнить некоторые базовые стили. Проблема с этим подходом состоит в том, что большинство редакторов будут создавать разметку, подобную этой, для подчеркнутого текста:
<p style = "text-ornament: underline;"> Плохой редактор, плохой. </ p>
Что еще хуже, некоторые редакторы используют теги везде, где это возможно:
<p> <u> Очень плохой редактор, очень плохой. </ u> </ p>
Expression Web улучшает эти подходы, автоматически создавая правила CSS, где это возможно. Первоначально эти правила будут назначены автоматически сгенерированному классу, подобному style14 и помещены в раздел style14 документа. Тем не менее, мы посмотрим, как улучшить это в ближайшее время.
Учитывая простоту создания нового стиля — просто выделите текст и нажмите кнопку подчеркивания на панели инструментов — всегда есть риск того, что ваш документ может быстро засоряться полученными автоматически сгенерированными стилями. Expression Web решает эту проблему путем автоматического повторного использования стилей с теми же свойствами, где это возможно. Например, если бы я должен был создать абзац, а затем подчеркнуть текст, абзацу было бы присвоено автоматически сгенерированное имя класса style1 и связанный CSS стиль будет создан в head документа. Изменение цвета текста этого абзаца на зеленый просто обновит style1 соответственно. Если бы я создал второй абзац подчеркнутого текста, style2 был бы создан и применен; однако, как только я style1 и тот же цвет текста для этого абзаца, оба абзаца будут обновлены для использования одного и того же style1 — style2 — и style2 будет удален. Конечно, эта функция может быть как благословением, так и проклятием для некоторых проектов , В зависимости от вашей ситуации вы можете включить функцию « Только повторно использовать классы с префиксом« стиль » на вкладке CSS диалогового окна« Параметры редактора страниц ».
Для тех, кто любит создавать свои CSS с использованием панелей инструментов и представления дизайна, а также для тех, кто предпочитает создавать каждое правило вручную, Expression Web предоставляет нам несколько хороших способов управления стилями. Особый интерес представляет панель « Управление стилями», показанная на рисунке 7, «Панель управления стилями» . На этой панели мы можем легко увидеть, какие стили мы использовали на нашей текущей странице и в связанных CSS-файлах. При наведении указателя мыши на один из этих стилей мгновенно отображается полный код правила. Если вы выберете элемент на поверхности конструктора, правило CSS с наивысшим приоритетом (то есть правило с наивысшей специфичностью) для этого элемента будет выделено в списке. , Если вам нравится вносить изменения в режиме конструктора, любые изменения стиля, такие как размер шрифта или изменение цвета, будут обновлены в соответствующем правиле. Они не будут забивать вашу страницу встроенным CSS, как в большинстве редакторов. Если вы предпочитаете создавать свой CSS- вручную, щелкните правой кнопкой мыши правило и выберите « легко получить доступ к разметке.
Как правило, когда я начинаю новый сайт, мне нравится создавать первую страницу и встроить все свои стили. Я считаю, что это помогает во время эволюции общей разметки и связанного CSS. Но когда приходит время сохранять страницу, мне нужно разделить эти стили на одну или несколько внешних таблиц стилей. Обычно эта задача решается с помощью довольно грубой последовательности операций вырезания и вставки. Используя панель « Управление стилями» , мы можем перетаскивать стили, чтобы изменить их порядок или даже переместить их в совершенно разные файлы. Мы также можем переименовывать class es и автоматически отражать изменения во всех наших селекторах и, что более важно, в нашей разметке. Сочетание этих двух функций делает рефакторинг CSS намного проще и надежнее.
По мере роста сайта вы можете обнаружить, что у вас слишком много стилей, включая те, которые больше не используются. В состав Expression Web включена функция отчетов CSS ( > ), которая может найти эти правила для вас. Как показано на рисунке 8, «Отчеты CSS» , доступны три различные проверки.
- Первый, « Неиспользуемые стили» , выделяет стили, которые определены в ваших документах CSS, но фактически не используются на ваших страницах. Это хорошая проверка, и она может помочь удалить старый код из ваших файлов CSS.
- Вторая проверка, Undefined Classes , выделяет
class, которые определены в вашей разметке, но не предназначены для каких-либо стилей. Я бы не рекомендовал использовать эту проверку, так какclassне используются исключительно для стиля. Правильное использование подходов прогрессивного улучшения для JavaScript часто требует включенияclasses в вашу разметку, и их не следует удалять. - Наконец, проверка Несоответствующий регистр ищет места, где регистр, который вы использовали для определения своего
classотличается между разметкой и CSS. Технически такой код недействителен, однако некоторые браузеры довольно слабы в этом. Вам лучше поддерживать последовательный случай, чтобы добиться максимальной совместимости.
В этой статье мы рассмотрели функции разметки и стилей, предлагаемые веб-продуктом Microsoft Expression. В следующей и последней статье этой серии мы рассмотрим инструменты, которые Expression Web предлагает для эффективного тестирования создаваемых страниц — будь то статические, на основе PHP или ASP.NET — в нескольких браузерах. Мы также узнаем, как публиковать ваш конечный продукт, и рассмотрим методы и инструменты, доступные для уменьшения повторения в вашем коде. Увидимся скоро! Тем временем, почему бы вам не проверить свои знания в нашей статье Microsoft-спонсируемой викторине ?