Microsoft Expression
Microsoft Expression как семейство программных продуктов было впервые продемонстрировано на Конференции профессиональных разработчиков (PDC — Professional Developers Conference) в 2005 году, но лишь в 2007 году корпорация Microsoft сделала общедоступным первый выпуск инструментальных средств из этого семейства. Семейство программных продуктов Expression представляет собой ряд приложений, предназначенных для тех пользователей, которые профессионально занимаются графическим оформлением, но этими продуктами все чаще стали пользоваться и разработчики программного обеспечения.
На момент написания этой статьи семейство Expression состояло из четырех программных продуктов (Expression Web, Expression Encoder, Expression Design и Expression Blend), которые можно было приобрести вместе с пакетом программ Microsoft Expression Studio Ultimate.
Вам, вероятно, будет приятно узнать, что если у вас или вашей организации имеется подписка на MSDN (собрание документов корпорации Microsoft, содержащее сведения обо всех ее разработках), то Expression Studio Ultimate входит в ваш текущий пакет программ. Но даже если у вас нет законной подписки на MSDN, вам все равно будет приятно узнать, что вы можете загрузить пробную версию Expression Studio Ultimate, действующую в течение 60 дней, по следующему адресу: http://www.microsoft.com/en-us/download/details.aspx?id=5915.
Строго говоря, для изучении материала требуется только копия Expression Blend. Но если вы стремитесь к тому, чтобы научиться внедрять сложную векторную графику в приложения WPF или Silverlight, настоятельно рекомендую установить также копию Expression Design. Все члены семейства Expression кратко рассматриваются ниже.
Назначение Expression Web
Инструментальное средство Expression Web позволяет создавать готовые для эксплуатации и стандартизованные веб-сайты в режиме визуальной разработки. Несмотря на то что это инструментальное средство веб-разработки от корпорации Microsoft, оно не накладывает никаких ограничений на применение только на платформе ASP.NET или ASP.NET AJAX, хотя поддержка платформы NET реализована в Expression Web отлично.
По желанию можете воспользовался интегрированными редакторами страниц и исходного кода для создания веб сайтов средствами PHP, HTML/XHTML, XML/XSLT, CSS, JavaScript, а также с помощью компонентов Adobe Flash и Windows Media.
В состав Expression Web входит также сопутствующий программный продукт Super Preview. Этот компонент Expression Web существенно упрощает тестирование создаваемых веб-сайтов в нескольких наиболее распространенных браузерах, работающих как в Windows, так и в Mac OS. Если у вас имеется некоторый опыт веб-разработки, то вам наверно известно, каких нервов стоит обеспечение правильного функционирования веб-страниц в разных программных средах. Применяя Expression Web и SuperPreview, вы получаете в свое распоряжение солидный набор инструментальных средств, помогающих благополучно справиться с подобной задачей и сберечь свои нервы.
Назначение Expression Encoder
Expression Encoder это инструментальное средство, предоставляющее удобную платформу для импорта, редактирования и усовершенствования видеоматериалов, кодированных и самых разных форматах файлов, включая AVI, WMV, WMA, QuickTime MOV (если установлен проигрыватель QuickTime), MPEG, VC-1 и H.264.
Так, например с помощью Expression Encoder можно создать на профессиональном уровне учебный видеоматериал, настроенный на воспроизведение в потоковом режиме в приложении Silverlight или WPF. Кроме того, Expression Encoder можно использовать для создания мультимедийных средств, плавно интегрируемых в приложения Silverlight или WPF посредством закладок и специально настраиваемых обложек.
Назначение Expression Design
Инструментальное средство Expression Design разработано корпорацией Microsoft с целью составить конкуренцию таким программным продуктам компании Adobe Systems, как Illustrator and Photoshop. (На самом деле в Expression Design и Expression Blend можно импортировать файлы изображений в форматах Illustrator и Photoshop — этих двух основных приложений для графического оформления.) По существу, инструментальное средство Expression Design позволяет художникам-оформителям создавать изысканные образцы векторной графики.
Как и следовало ожидать, Expression Design дает художникам-оформителям возможность сохранять результаты своих трудов в самых разных стандартных форматах файлов, включая PNG, JPEG, GIF, TIFF и пр. Но самое интересное, что Expression Design позволяет также сохранять графические данные в формате XAML для приложений WPF и Silverlight.
Предоставляя возможность сохранять векторную графику в формате XAML, Expression Design существенно упрощает разработчикам задачу внедрения профессионально оформленной графики в существующее приложение и ее взаимодействия с данными посредством кода. В частности, художник-оформитель может создать стилизованный двухмерный лабиринт для видеоигры. Сохранив эти графические данные в формате XAML, он может затем импортировать их в проект Expression Blend (или Visual Studio 2010) и дополнить стилизованной анимацией, поддержкой проверки местоположения курсора мыши и прочими средствами.
Назначение Expression Blend
Expression Blend представляет собой компонент, предназначенный для разработки приложений WPF или Silverlight на промышленном уровне. Это инструментальное средство генерирует большой объем кода XAML, требующегося для прикладных программ. И хотя аналогичную разметку можно выполнить вручную, используя разнообразные средства разработки, начиная с текстового редактора WordPad и кончая интегрированной средой Visual Studio 2010, вы можете избавить себя от хронических судорог в кистях рук, воспользовавшись многословным характером синтаксиса XAML, основанного на языке XML.
Возможности Expression Blend выходят далеко за рамки относительно простой поддержки редактирования кода XAML в Visual Studio 2010, предоставляя развитые инструментальные средства для компоновки и настройки элементов управления, создания анимационных последовательностей, специальных стилей оформления и шаблонов, построения новых классов UserControl из имеющейся векторной графики, визуальной разработки шаблонов данных, назначения различных режимов работы и визуальных состояний для элементов пользовательского интерфейса и выполнения многих других полезных операций.
В частности, в ней не поддерживается отладка кода. Правда, проект в Expression Blend имеет тот же самый формат, что и родственный ему проект в Visual Studio 2010. Следовательно, работу над новым проектом можно начать в Expression Blend с разработки пользовательского интерфейса, а затем открыть этот проект в Visual Studio 2010 для реализации, отладки, тестирования и компоновки сложного кода приложения.
Как правило, подавляющая часть приложений WPF или Silverlight строится в каждой из упомянутых выше интегрированных сред в цикле их разработки.
Помимо инструментальных средств, предоставляемых для построения изящно оформленных пользовательских интерфейсов, в состав Expression Blend входит набор инструментов, позволяющих оперативно создавать прототипы приложений средствами SketchFlow. Этот компонент Expression Blend дает возможность быстро и эффективно имитировать и определять последовательность операций в пользовательском интерфейсе приложения, компоновку экранов и переход из одного состояния приложения в другое.
На рисунке приведен пример проекта SketchFlow:
Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории
Введение
Этой статьей я хочу начать цикл статей, посвященных созданию прототипов с помощью Expression Blend и SketchFlow. Мы постепенно пройдемся от базовых концепций и понимания, как работает SketchFlow, до отдельных нюансов вроде настройки и брендирования проигрывателя прототипов. Местами, я буду включать переводы статей других авторов.
В качестве введения в тему и для того, чтобы получить общее представление, предлагаю посмотреть вот это короткое видео (всего 90 секунд!) с обзором текущих возможностей SketchFlow:
А начнем мы со статьи Christian Schormann об истории SketchFlow.
SketchFlow: Немного истории
SketchFlow, инструмент динамичного прототипирования для Expression Blend, наконец официально вышел (от переводчика: статья писалась к выходу Expression Blend 3)! Вы можете скачать триальную версию здесь.
Так как мне всегда нравилось наблюдать за развитием людей, идей и продуктов, я подумал, что вам тоже будет интересно узнать немного о прошлом SketchFlow — сейчас, кажется, подходящий момент, чтобы взять школьные тетрадки со столика и рассказать немного о том, как рос SketchFlow. Если вы хотите узнать больше о сегодняшем состоянии SketchFlow, смотрите этот пост…
Давайте начнем с детских фотографий: 
Это прототип, который я написал несколько лет назад на Windows Forms, задолго до появления Avalon/WPF. Даже на этой ранней картинке, хорошо заметен большой редактор карты, названный «Storyboard editor». Серые стрелки отображают навигацию, а красные связи композицию.
А вот другая детская фотография тех же лет. Она показывает редактор скетчей, который позволял очень быстро набрасать в черновике идеи UI:
Вам тоже кажутся знакомыми эти волнистые линии? В левом нижнем углу располагается библиотека элементов, включающая заранее подготовленные повторно используемые компоненты.
Другая фотография показывает проигрыватель в его самые первые дни:
Слева вы можете увидеть все доступные команды: зеленые обозначают навигацию, а оранжевые соответствуют изменению состояний. Внизу слева уже доступные простые средства для заметок. В этом прототипе заметки были простыми вставками речи (speech bubbles как в комиксах).
Должен честно признаться, что у нас сохранилось не так много записей за последующие несколько лет. По существу, жизнь расставила другие приоритеты, а с нашим героем практически ничего не происходило.
В один прекрасный день, когда SketchFlow встретился с Blend в первый раз (в наш офис в Миннесоте пришел Bob Pappas): 
Это была любовь с первого взгляда, и с тех пор вещи начали очень быстро развиваться, взращиваемые потрясающими командами Blend и SketchFlow в Редмонде и Минессоте. Вот как выглядел плеер в тот период: 
Немного спустя мы можем обнаружить фотографии вроде этой: 
Следующая фотография сделана вскоре от предыдущей, когда мы смело экспериментировали над различными видами кривых для обозначения связей в карте:
И наконец, мы пришли ко дню выпуска из школы:
Сейчас Expression Blend + SketchFlow доступен для загрузки в составе Expression Studio. (От переводчика: Expression Studio также доступна в рамках подписок MSDN, MSDNAA, программ DreamSpark и BizSpark.)
Для нас безусловно будет большой честью, если вы попробуете его в работе. Команды Blend и SketchFlow с нетерпением ждут ваших первых (а также вторых и третьих) впечатлений.
Выражение Web 4.0 часто задамые вопросы
В этой статье приводится ряд часто задаваемого вопроса (ЧАСТО ЗАДАВА) о Microsoft Expression Web 4.0
Оригинальная версия продукта: Expression Web 4.0
Исходный номер КБ: 2509312
Общие вопросы и вопросы продаж
Что такое Microsoft Expression Web 4?
Expression Web 4 — это профессиональный инструмент разработки и разработки для создания современных веб-сайтов на основе стандартов, которые используют PHP, HTML/XHTML, CSS, JavaScript, ASP.NET или ASP.NET AJAX.
Как приобрести Expression Web 4?
Выражение Web 4 доступно в рамках веб-сайта Expression Studio 4 Professional Или Expression Studio 4 Ultimate. Его можно приобрести у различных реселлеров и онлайн-посредников или же можно приобрести для немедленной загрузки в интернет-магазине Майкрософт.
Каковы параметры обновления и цены?
Если у вас есть Expression Web 3, вы можете перейти на Expression Web 4 бесплатно. Просто скачайте пробную часть Expression Web 4 на компьютер, на котором установлено выражение Web 3. Пробная версия 4 находит существующую лицензию и преобразуется из пробной версии в вечный продукт.
Клиенты, в том числе владельцы Office, версий 1 и 2 любого продукта Expression и любого продукта Adobe Creative Suite, могут перейти на Expression Web 4 за 79 долларов США.
Любой клиент экспрессии версии 1 или 2 (любой продукт) может перейти на полную версию Expression Studio 4 Ultimate по оценочная розничная цена 349 долларов США или веб-Professional Expression Studio 4 по приблизительной розничной цене в 79 долларов США.
На каких языках доступно выражение Web 4?
Каждый продукт Expression доступен на следующих языках: английском, французском, немецком, испанском, итальянском, японском, китайском упрощенном, китайском и корейском.
Какие ресурсы приходят с помощью Expression Web 4?
Expression Web 4 будет включать в себя несколько ресурсов, которые помогут пользователям начать работу с приложением, в том числе печатную страницу «Начало работы», а также помощь в интернете и учебники.
Вопросы, задающие конкретные продукты
Кто является целевой аудиторией для Expression Web 4?
Expression Web 4 ориентирована на профессиональных веб-разработчиков и дизайнеров, строивших веб-сайты и приложения на основе стандартов XHTML. Expression Web поддерживает PHP, HTML/XHTML, XML/XSLT, CSS, JavaScript, ASP.NET или ASP.NET AJAX, Silverlight, Flash, Windows Media и Photoshop, а также интеграцию рабочего процесса с Visual Studio и Expression Studio.
Создает ли Expression Web 4 контент для всех браузеров?
Да. Expression Web 4 поддерживает стандарты XHTML и CSS и позволяет веб-разработчикам и дизайнерам легко создавать сайты с агностиком браузера. Expression Web 4 также включает поддержку доступности для создания доступных веб-сайтов, соответствующих стандартам.
Как Expression Web 4 сопоставлять Office FrontPage 2003 и Visual Studio как средство ® веб-дизайна и разработки?
Expression Web 4 — это продукт для профессиональных веб-разработчиков и дизайнеров, которые сочетают лучшие технологии FrontPage и Visual Studio в новом пользовательском интерфейсе для создания веб-сайтов с HTML/XHTML, CSS, XML/ XSLT, PHP и ASP.NET 4. При необходимости пользовательский интерфейс и функции Expression Web 4 и Visual Studio идентичны (например, для свойств ASP.NET управления).
Как Expression Web 4 снижает сложность разработки и проектирования?
Expression Web 4 обеспечивает бесшовную интеграцию Visual Studio 2008 & 2010 и ASP.NET 4, что позволяет разработчикам и разработчикам работать вместе с помощью наиболее удобных для них продуктов. Дизайнеры и веб-разработчики могут легко выложить XHTML, CSS, JavaScript и динамические функции с помощью Expression Web 4 и воспользоваться многими ASP.NET определенными функциями, как Master Pages для шаблонов, а также перетаскивать и отбрасывать элементы управления. Затем проект может быть передан разработчикам Visual Studio, что позволит им расширить функциональные возможности с помощью расширенного кода на стороне сервера и бизнес-логики.
Вопрос поддержки
Предоставляется ли поддержка клиентов с помощью версий Expression Trial?
Формальная поддержка для этого пробного выражения не предлагается.
Разработка с помощью Microsoft Expression Blend
В моей предыдущей статье мы рассмотрели SketchFlow, инструмент для создания прототипов, который является частью пакета Microsoft Expression Studio. Мы увидели, как быстро создать каркасный прототип для простого приложения для просмотра портфолио, и как использовать функции обратной связи SketchFlow для сбора отзывов заинтересованных сторон и пользователей.
В этой статье мы углубимся в Expression Blend и посмотрим, как запустить прототип нашего портфолио в производство с помощью Microsoft Silverlight. Мы рассмотрим навигацию, макет и примеры данных — и все без написания кода!
Silverlight и Expression Blend
К настоящему времени вы, вероятно, сталкивались с технологией Microsoft Silverlight где-то в Интернете. В двух словах, Silverlight — это предложение Microsoft по предоставлению интерактивных возможностей.
Silverlight предоставляет богатый набор функций для визуального дизайна, анимации, интеграции мультимедиа, макета и визуализации данных. Он обладает широким диапазоном элементов управления с поддержкой скинов и мощными механизмами для определения сложных пользовательских интерфейсов. Silverlight также создан для взаимодействия с веб-платформой. Приложения Silverlight могут легко взаимодействовать с базовым браузером и HTML-страницей, в том числе управлять DOM и вызывать (и вызываться) JavaScript.
Плагин Silverlight работает около 4 МБ с поддержкой Internet Explorer, Safari, Firefox, Opera и Google Chrome. Silverlight работает на Windows и Mac OSX, Linux (через проект Mono) и скоро также будет работать на Windows Phone.
Silverlight для разработчиков
Silverlight для дизайнеров
Для дизайнеров ключевыми преимуществами работы с Silverlight являются четкое отделение дизайна от разработки, предоставляемой платформой, и доступность сложных инструментов дизайна. Silverlight позволяет дизайнерам работать естественно и быть очень продуктивными, при этом практически не требуя программирования.
Это подводит нас к Expression Blend.
Выражение смесь
Expression Blend является частью набора инструментов разработки Microsoft Expression Studio. Это производственный инструмент для проектирования и создания пользовательских интерфейсов для Silverlight в Интернете и Windows Phone, а также для WPF (Windows Presentation Foundation) в Windows и Microsoft Surface. Expression Blend также поддерживает SketchFlow, инструмент быстрого прототипирования, который мы рассмотрели в предыдущей статье.
Сила Blend заключается в том, что он позволяет дизайнерам создавать собственный богатый пользовательский интерфейс, а не описывать интерфейс в каркасах, картах сайтов и композициях для посторонних (и, возможно, неверно истолковывать). Blend позволяет дизайнерам создавать производственный интерфейс самостоятельно, если они того пожелают, при этом работая с привычными инструментами и концепциями. Это позволяет дизайнерам не только работать более продуктивно, но и дольше работать над их дизайном, так как меньше требуется формальная передача команды разработчиков.
Дизайнер-разработчик Workflow: секретный соус
Когда я работал в Microsoft, одним из наших ключевых сообщений был улучшенный рабочий процесс дизайнер-разработчик, который понравился дизайнерам, использующим Blend, и разработчикам, использующим Visual Studio. Дизайнеры и разработчики могут одновременно работать над одним и тем же проектом в Blend и Visual Studio. Дизайнеры любят это, потому что это делает их полноправными членами команды проекта, позволяя им вносить равный вклад в проект, а не восприниматься как посторонние, которые должны полагаться на доброту разработчиков, чтобы увидеть свою работу реализованной.
Декларативные пользовательские интерфейсы с XAML
Основой Silverlight и WPF является язык определения пользовательского интерфейса XAML. XAML — это язык на основе XML для определения содержимого, макета и поведения пользовательских интерфейсов. На рисунке 1 «В основе вашего опыта Silverlight лежит язык XAML на основе XML» показан элемент интерфейса кнопки и соответствующий код XAML, который создает кнопку. Хотя синтаксис и механика языка сильно отличаются от HTML, его намерения аналогичны. Именно XAML делает возможными инструменты проектирования пользовательского интерфейса, такие как Blend. Как дизайнеру, стоит понять основы работы XAML. Хотя обычно нет необходимости иметь возможность кодировать в XAML (я пока не нашел в этом необходимости), может быть полезно иметь возможность читать XAML, чтобы помочь отладить любое необъяснимое поведение в вашем проекте.
Рисунок 1. В основе вашего опыта Silverlight лежит язык XAML на основе XML
Из SketchFlow для смешивания
Рисунок 2. Наш прототип SketchFlow
Естественный вопрос, который нужно задать в этот момент, заключается в том, можете ли вы превратить свой прототип SketchFlow в рабочий проект, когда будете готовы. Ответ да, вроде …
Прототип SketchFlow — это проект Blend, как и любой другой. В дополнение к элементам, которые вы определяете сами, SketchFlow предоставляет скрытые механизмы для подключения всего, реализации карты SketchFlow, предоставления стилей SketchFlow и, конечно, создания кода, необходимого для проигрывателя SketchFlow. Чтобы преобразовать прототип SketchFlow в производственный проект, у вас есть два варианта:
Удалите все части проекта SketchFlow. Для этого есть инструкции в файлах справки Blend.
Соберите активы, которые вы хотите сохранить, и эффективно скопируйте и вставьте их в новый проект.
Для всех проектов, кроме самых простых, я бы порекомендовал вариант 2. Во-первых, он гарантирует, что в вашем проекте не осталось никаких кусочков SketchFlow. Во-вторых, будучи частью прототипа, ваши экраны, вероятно, довольно небрежны по производственным стандартам. Весь смысл быстрого прототипирования означает, что вы, вероятно, на самом деле не задумывались о таких вопросах, как компоновка, ограничение, изменение размера, именование или хорошие архитектурные практики. По этой причине вам, вероятно, лучше просто просмотреть свой прототип и скопировать элементы (экраны, компоненты, анимации и т. Д.), Которые вы хотите использовать в качестве отправной точки для своего производственного проекта.
В нашем случае прототип настолько прост, что мы можем просто начать заново.
Давайте начнем
Рисунок 3. Выбор подходящего типа проекта
Microsoft Expression Web — Краткое руководство
Microsoft Expression Web — это полнофункциональный профессиональный инструмент для проектирования, разработки и публикации многофункциональных веб-сайтов, соответствующих веб-стандартам. Вы можете использовать Expression Web для создания веб-страниц и сайтов, которые позволяют передавать файлы между вашим компьютером и учетной записью хостинга.
Expression Web может проектировать и разрабатывать веб-страницы с использованием HTML5, CSS 3, ASP.NET, PHP, JavaScript, XML + XSLT и XHTML.
Microsoft Expression Web — История
Microsoft Expression Web — история Microsoft выпустила первую версию Expression Web для предварительного просмотра технологий сообщества (CTP) 14 мая 2006 года.
Microsoft Expression Web 4 был выпущен 7 июня 2010 года.
Он добавил опцию HTML-надстроек и доступ к веб-функциональности для тестирования страниц в браузерах, которые не могут быть установлены в системе пользователя, например в браузерах Mac OS X или Linux.
Он также предоставляет SEO Checker, с помощью которого вы можете анализировать уже созданные веб-сайты на основе лучших практик для получения максимально возможного рейтинга в поисковых системах.
Он добавил опцию HTML-надстроек и доступ к веб-функциональности для тестирования страниц в браузерах, которые не могут быть установлены в системе пользователя, например в браузерах Mac OS X или Linux.
Он также предоставляет SEO Checker, с помощью которого вы можете анализировать уже созданные веб-сайты на основе лучших практик для получения максимально возможного рейтинга в поисковых системах.
Expression Web Service Packs
Пакеты обновлений Expression Web 4 Пакет обновлений Expression Web 4 был выпущен в марте 2011 года и добавил поддержку IntelliSense для HTML5 и CSS.
Expression Web 4 Service Pack 2 был выпущен в июле 2011 года. Он исправил ряд проблем и представил новые функции, такие как —
В декабре 2012 года Microsoft объявила, что Expression Studio больше не будет автономным продуктом. Expression Blend интегрируется в Visual Studio, тогда как Expression Web и Expression Design теперь будут бесплатными продуктами.
Системные Требования
Чтобы создать веб-сайт с помощью Microsoft Expression Web, ваш компьютер должен соответствовать следующим требованиям:
Фактические требования и функциональность продукта могут различаться в зависимости от конфигурации вашей системы и операционной системы.
Настройка среды
Microsoft предоставляет бесплатную версию Microsoft Expression Web, которую можно загрузить по адресу https://www.microsoft.com/en-pk/download/details.aspx?id=36179.
Монтаж
Шаг 2 — После завершения загрузки запустите установщик. Следующий диалог будет отображен.
Шаг 3 — Нажмите кнопку Принять.
Шаг 4. Выберите переключатель «Да» и нажмите «Далее».
Шаг 5 — Вы можете выбрать другое место для установки. Выберите местоположение и нажмите кнопку «Установить».
Процесс установки начинается.
После завершения установки вы увидите следующий диалог.
Шаг 6 — Нажмите Готово, чтобы продолжить.
Microsoft Expression Web — новый веб-сайт
В предыдущей главе мы установили Microsoft Expression Web и теперь мы готовы начать работу над ним. В этой главе мы узнаем, как создать новый сайт с нуля.
Создать сайт
Чтобы создать новый веб-сайт, давайте откроем Microsoft Expression Web.
Далее вам необходимо выполнить шаги, приведенные ниже.
Шаг 2 — Откроется следующее диалоговое окно, из которого вы можете создавать или импортировать различные типы веб-сайтов.
Укажите местоположение или вы можете перейти к месту, где вы хотите создать новый веб-сайт.
Введите имя вашей сети в поле имени и нажмите OK.
Укажите местоположение или вы можете перейти к месту, где вы хотите создать новый веб-сайт.
Введите имя вашей сети в поле имени и нажмите OK.
Шаг 5 — Тип документа по умолчанию, используемый в Expression Web, —
Шаг 6 — Теперь давайте добавим тег
Это откроет нашу сеть в Internet Explorer.
Microsoft Expression Web — пустая веб-страница
Поскольку мы уже создали наш веб-сайт, теперь нам нужно будет создать нашу домашнюю страницу. В предыдущей главе мы создали одностраничный веб-сайт, и в то время наша домашняя страница была создана Expression Web автоматически. Итак, если вы создали пустой веб-сайт, то вам нужно будет создать домашнюю страницу для своего сайта.
Microsoft Expression Web может создавать страницы следующих типов:
В этой главе мы создадим страницу HTML и соответствующую ей таблицу стилей.
Создать пустую страницу
В новом диалоговом окне вы можете создать различные типы пустых страниц, такие как HTML-страница, ASPX-страница, CSS-страница и т. Д., И нажмите кнопку «ОК».
Как вы можете видеть здесь, код по умолчанию уже добавлен Microsoft Expression Web.
Создать страницу CSS
Давайте проведем вас через пошаговый процесс создания страницы CSS.
Шаг 2 — Выберите « Основные» → «CSS» и нажмите «ОК».
Шаг 3 — Сохраните страницу и введите имя для таблицы стилей.
Шаг 5 — Теперь перейдем на страницу index.html.
Шаг 7. Перейдите к таблице стилей, выберите «Текущая страница» из «Прикрепить к» и «Ссылка из», а затем нажмите «ОК».
Шаг 8 — Теперь вы увидите, что новая строка автоматически добавляется на страницу index.html.
Здесь вы можете определить различные параметры для вашего стиля. Первый шаг — выбрать тело из раскрывающегося списка «Селектор», а затем выбрать существующую таблицу стилей из раскрывающегося списка «Определить в».
Шаг 11 — Теперь вы можете видеть в режиме конструктора, что цвет фона и шрифт изменились на тот, который мы выбрали. Теперь, если вы откроете файл sample.css, вы увидите, что вся информация автоматически сохраняется в файле CSS.
Давайте предварительно просмотрим нашу веб-страницу в браузере. Вы заметите, что стиль применяется из файла CSS.
Microsoft Expression Web — макет веб-страницы
В этой главе мы рассмотрим основные макеты ваших веб-страниц. Прежде чем создавать макет нашей веб-страницы, нам нужно подумать о нашем контенте, а затем спроектировать, как мы хотим представить этот контент, так как именно контент будет отображаться на нашем сайте.
От нас зависит, как мы представляем наш контент, чтобы наши зрители находили наш сайт, а затем оставались, чтобы проверить его. Макет, вероятно, будет включать логотип компании или баннер в верхней части, меню навигации, область содержимого, которая может включать несколько столбцов, и нижний колонтитул внизу страницы.
Ранее разработчики использовали таблицы для достижения этого вида. Таблицы создали группу блоков, которые использовались для создания строк и столбцов. Теперь веб-дизайнеры используют
Ниже приведены некоторые особенности тега
Он используется для группировки элементов блока, чтобы отформатировать их с помощью CSS.
Браузеры обычно помещают разрыв строки до и после элемента div.
Он используется для группировки элементов блока, чтобы отформатировать их с помощью CSS.
Браузеры обычно помещают разрыв строки до и после элемента div.
пример
Давайте рассмотрим простой пример, в котором мы будем использовать теги
Шаг 1 — Откройте Expression Web, а затем страницу index.html, которую мы создали в предыдущей главе.
Шаг 4 — Первый шаг — выбрать тело из раскрывающегося списка « Селектор», а затем выбрать существующую таблицу стилей из «Определить в» в раскрывающемся списке. Из URL выберите файл CSS, который мы создали в предыдущей главе.
С левой стороны находится список категорий, например «Шрифт», «Фон» и т. Д., А текущий шрифт выделяется. Установите информацию о шрифтах в соответствии с вашими требованиями, как показано на скриншоте выше.
Шаг 6 — Давайте выберем параметр двойной линии для границы и выберем ширину и цвет также из выпадающих списков. Как только вы закончите со стилем, нажмите ОК.
Шаг 7 — Теперь вы можете видеть в режиме конструктора, что цвет фона меняется на тот, который мы выбрали. Если вы откроете файл sample.css, вы увидите, что вся информация автоматически сохраняется в файле CSS.
Шаг 8 — Снова перейдите на страницу index.html и перетащите элемент
Шаг 9. Над представлением кода вы увидите теги и
Введите «#container» в поле «Селектор». Хеш-знак # является селектором идентификатора. В раскрывающемся списке «Определить в» выберите «Существующая таблица стилей» и установите флажок «Применить новый стиль к выбору документа». Перейти в категорию фона.
Шаг 10 — Выберите цвет фона, давайте выберем белый цвет и затем перейдем в категорию Box.
Шаг 11 — Определите отступы и маржу, а затем перейдите в категорию Position
Шаг 12 — Установите ширину до 90%. Однако не указывайте высоту, так как здесь мы хотим, чтобы контейнер расширялся при вводе содержимого. Нажмите кнопку ОК.
Аналогично, давайте добавим стили для верхнего колонтитула, верхней навигации, левой навигации, основного контента и нижнего колонтитула.
sample.css
Ниже приведен код в таблице стилей sample.css после добавления всех вышеупомянутых стилей.
index.html
Ниже приведен код в файле index.html после добавления всех тегов
Выход
Ваш макет страницы в режиме конструктора будет выглядеть так, как показано на следующем снимке экрана.
Microsoft Expression Web — макет HTML
В этой главе мы изучим другой способ разработки макета страницы. В последней главе мы использовали таблицу стилей для применения стилей к верхнему и нижнему колонтитулам и т. Д., Но вы также можете указать стили на самой HTML-странице без использования дополнительной таблицы стилей.
Это не рекомендуемый способ разработки макета, однако просто для понимания цели мы рассмотрим эту технику здесь. Попробуйте выполнить шаги, приведенные ниже.
Шаг 1 — Давайте добавим HTML-страницу и назовем ее layoutdemo.html
Шаг 2 — Теперь добавьте тег
Шаг 3 — На панели « Применить стили» нажмите « Новый стиль».
Шаг 4 — Когда вы выбираете опцию Текущая страница из выпадающего списка «Определить в», стиль будет сохранен на той же HTML-странице. Установите шрифт для своей страницы и перейдите в категорию «Фон».
Шаг 5 — Установите цвет для вашего фона. Вы также можете установить категории «Граница», «Рамка» и «Положение», а затем нажать «ОК».
layoutdemo.html
Вы можете видеть, что стиль добавляется в тот же файл HTML.
Точно так же вы можете добавить другие стили, такие как заголовок, нижний колонтитул, основной контент и т. Д., Как показано выше.
Горизонтальная навигация
В этой главе мы узнаем, как добавить горизонтальную навигацию или пункты меню на сайт.
Шаг 1 — Чтобы создать пункты меню или горизонтальную навигацию, давайте добавим следующий код в
Шаг 3 — Выберите элемент, который вы хотите использовать в качестве гиперссылки, и нажмите Ctrl + K.
Шаг 4 — Нажмите на кнопку ScreenTip….
Шаг 5 — Введите текст, который вы хотите в качестве подсказки на экране и нажмите ОК.
Шаг 6 — В поле « Текст для отображения» введите « Домой», выберите файл index.html и нажмите «ОК».
Шаг 7. Аналогичным образом добавьте гиперссылки для других пунктов меню, как показано в следующем коде.
Шаг 9 — Щелкните правой кнопкой мыши «# top-nav» и выберите «Изменить стиль». Выберите категорию «Граница» и измените ширину на тонкую.
Шаг 10 — Выберите категорию «Поле» и снимите флажок «Одинаково для всех» и введите 10 в верхнем и нижнем полях.
Шаг 12 — Удалите 50 из поля высоты и нажмите ОК. На панели «Применить стили» нажмите «Новый стиль».
Шаг 13 — Введите # top-nav ul в поле «Селектор» и выберите существующую таблицу стилей из выпадающего списка «Определить в». В категории «Блок» выберите центр в поле «Выровнять тест» и перейдите в категорию «Список».
Шаг 14 — Выберите ни один из поля типа стиля списка и нажмите OK.
Шаг 16 — Выберите inline из поля отображения и нажмите OK.
Шаг 17 — Перейдите на панель «Применить стили», нажмите «Новый стиль». Введите # top-nav ul li a в поле «Селектор», выберите существующую таблицу стилей в раскрывающемся меню «Определить в» и выберите белый цвет в качестве цвета шрифта.
Шаг 20 — Установите значения отступов и нажмите ОК.
Шаг 23 — Выберите цвет фона для вашего пункта меню, когда мышь наводит курсор на элемент меню, и перейдите в категорию «Граница».
Шаг 24 — Выберите стиль, ширину и цвет границы и нажмите «ОК». Чтобы проверить, как это выглядит, перейдите в меню «Файл» и выберите «Предварительный просмотр в браузере».
При наведении курсора мыши на любой элемент меню, он изменит фон и цвет шрифта.
Вертикальная навигация
В этой главе мы узнаем, как добавить вертикальную навигацию или пункты меню на сайт. Пойдем шаг за шагом.
Шаг 1 — Чтобы создать элементы меню или вертикальную навигацию, давайте добавим следующий код в
Шаг 3 — Выберите элемент, который вы хотите использовать в качестве гиперссылки, и нажмите Ctrl + K.
Шаг 4 — Нажмите кнопку ScreenTip…. Введите текст, который вы хотите, в качестве всплывающей подсказки и нажмите ОК.
Шаг 5 — В поле « Текст для отображения» введите « Домой», выберите файл index.html и нажмите «ОК».
На этом этапе наша страница index.html выглядит следующим образом:
Шаг 6 — Добавьте дополнительные гиперссылки для других пунктов меню, как показано в следующем коде.
Шаг 7 — Чтобы установить стиль для верхней навигации, перейдите на панель «Управление стилями». Щелкните правой кнопкой мыши на # left-nav и выберите Modify Style…
Шаг 8 — Введите значение 0,9 в поле font-size, выберите em из выпадающего списка рядом с font-size и перейдите в категорию Box.
Шаг 9 — Проверьте заполнение «Одинаково для всех», введите 5 в верхнем поле и нажмите «ОК». На панели «Применить стили» нажмите «Новый стиль».
Шаг 10 — Введите # left-nav ul в поле выбора. Выберите существующую таблицу стилей из выпадающего списка «Определить в» и в категории «Список» не выберите ни один из поля «тип стиля списка» и нажмите «ОК».
Шаг 12 — Введите # left-nav ul li в поле «Селектор» и выберите существующую таблицу стилей из выпадающего меню «Define in» и перейдите в категорию «Box».
Шаг 13 — Перейдите на панель «Применить стили» и нажмите «Новый стиль».
Шаг 14. Введите # left-nav ul li a в поле «Селектор» и выберите существующую таблицу стилей из выпадающего меню «Define in» и выберите белый в качестве цвета шрифта.
Шаг 15 — Перейти в категорию фона. Выберите цвет в качестве цвета фона
Шаг 16 — Перейдите в категорию Box и установите значения отступов.
Шаг 18. Теперь давайте снова перейдем на панель «Применить стили» и нажмите «Новый стиль». Введите # left-nav ul li a: hover в поле «Селектор» и выберите существующую таблицу стилей из выпадающего меню «Define in». Выберите черный в качестве цвета шрифта.
Шаг 19 — Теперь перейдите в категорию «Фон». Выберите цвет фона для вашего параметра меню, когда мышь наводит курсор на элемент меню, и нажмите кнопку «ОК».
Шаг 20. Чтобы проверить, как это выглядит, перейдите в меню «Файл» и выберите «Просмотр» в браузере.
Когда вы наводите указатель мыши на любой элемент меню, он меняет фон и цвет шрифта.
Microsoft Expression Web — проверка страниц
В этой главе мы узнаем, как убедиться, что наш HTML и CSS код проверяется. Microsoft Expression Web предоставляет несколько способов проверить ваши веб-страницы на наличие ошибок кода и кода, который несовместим с определенной схемой HTML и CSS.
Строка состояния и представление «Код» предупреждают об ошибках и несовместимости кода на одной странице, а на панели задач «Совместимость» перечисляются все ошибки и несовместимости кода на одной или нескольких страницах или на всем веб-сайте.
Expression Web идентифицирует несовместимый код с помощью схемы документа, основанной на объявлении DocType на странице.
Строка состояния и представление «Код» предупреждают об ошибках и несовместимости кода на одной странице, а на панели задач «Совместимость» перечисляются все ошибки и несовместимости кода на одной или нескольких страницах или на всем веб-сайте.
Expression Web идентифицирует несовместимый код с помощью схемы документа, основанной на объявлении DocType на странице.
Когда вы создаете сайт и работаете над его страницами, вы должны выработать привычку проверять страницы. Microsoft Expression Web имеет различные инструменты, которые могут быть очень полезны при проверке ваших веб-страниц. В веб-выражении есть два очень полезных параметра, поэтому перейдем в меню «Инструменты» и выберите «Редактор страниц».
Вкладка «Общие» предлагает два варианта:
Выделить недопустимый HTML — при выборе этого параметра будет отображаться недопустимый HTML-код в определенной цветовой схеме, а по умолчанию — красным текстом на желтом фоне.
Выделить несовместимый HTML — при выборе этого параметра под кодом будет отображаться волнистое подчеркивание, несовместимое со стандартами HTML.
Выделить недопустимый HTML — при выборе этого параметра будет отображаться недопустимый HTML-код в определенной цветовой схеме, а по умолчанию — красным текстом на желтом фоне.
Выделить несовместимый HTML — при выборе этого параметра под кодом будет отображаться волнистое подчеркивание, несовместимое со стандартами HTML.
Статус бар
Если текущая открытая веб-страница содержит ошибку кода, вы увидите значок « Обнаружена ошибка кода» (выделено на следующем снимке экрана).
Предположим, вы забыли символ «>» в теге —
В этом случае в строке состояния в нижней части окна программы отображается значок «Обнаружена ошибка кода».
Когда вы выбираете «Перейти к ошибке» из выпадающего меню, вы попадете на строку, где существует ошибка, и вы сможете легко исправить синтаксис.
Предположим, вы использовали «hre» для гиперссылки вместо «href», что является ошибкой.
В строке состояния отображается значок «Обнаружена несовместимость HTML», как показано на следующем снимке экрана.
Когда вы выбираете «Перейти к ошибке» из выпадающего меню, вы попадете на строку, где существует ошибка, и вы сможете легко исправить синтаксис.
Отчет о совместимости
Отчет о совместимости проверяет страницы и файлы CSS на наличие ошибок кода и кода, который несовместим с указанной схемой DocType и CSS. Вы можете создать отчет, который проверяет только определенные файлы или весь сайт.
Шаг 1. Чтобы создать отчет о совместимости, перейдите в меню инструментов и выберите параметр «Отчеты о совместимости…».
Шаг 2. Диалоговое окно проверки совместимости предоставляет различные параметры для проверки только определенных файлов на вашем сайте, либо откройте эти файлы, либо выберите их на панели задач «Список папок» или в представлении «Веб-сайт». Выберите параметры согласно требованию и нажмите кнопку «Проверить».
Шаг 3. Открывается область задач «Совместимость», а в нижней части панели задач отображается статус создания отчета. При двойном щелчке по любой строке вы попадете в место, где существует ошибка.
