С августа 2008 года, сотни тысяч людей уже воспользовались Photosynth, загрузили 12 млн. фото в 350 тыс. фотосинтов.

Теперь наступил следующий этап развития с использованием технологии Silverlight ( о чем писал Константин Кичинский), которая позволяет поместить ваш Photosynth на Virtual Earth с возможностью просмотра, например, на Маках (при условии, конечно, что у вас установлен Silverlight).

Что дает эта возможность? Ну, для туристического агентства плюсы описывать даже и не стоит – они очевидны. Также она может использоваться, например, на сайтах агентств недвижимости, что тоже очень круто! Возможностей использования масса, как вы понимаете.

SuperPreview позволит многим верстальщикам, наконец, избавиться от головной боли подгонки сайта под различные виды браузеров.

Сейчас эта фича доступна только для различных версий IE (что уже очень радует, но печалит, что в Win7 IE6 не поддерживается, но над этим работают). В составе Expression Web 3 она также будет поддерживать FireFox. Для Safari SuperPreviw будет реализован в виде облачного сервиса позднее, после релиза Expression Web 3 (1 октября 2009). По поводу других браузеров разработчики свои планы не раскрывают…

SuperPreview в третьей версии Expression Web будет встроенным, но уже сейчас он доступен для скачивания и его можно попробовать.

Пока версия сыровата и имеются известные баги, которые обсуждаются на форуме.

Как это работает?

После загрузки сайта, SuperPreview получает картинку и DOM. Нужно отметить, что это именно “мгновенный” статический снимок сайта, интерактивный контент (JS или разворачивающееся меню) отображаться не будет. 

Чтобы было легче увидеть проблемные места, они подсвечиваются:

Вот так вот коротенько, в нескольких словах я описала новую разработку, которая в скором будущем многим (очень на это надеюсь) облегчит жизнь!

Итак, для начала создадим простую базу данных MS Access (2003), состоящую из двух табличек:

1. каталог товаров – табличка Products;

2. заказы, отправленные с сайта – табличка Orders.

Теперь идем в Expression web и создаем 2 странички с расширением .aspx (для подгрузки данных из MS Access мы будем использовать элементы ASP.NET): catalog.aspx и form.aspx.

Все готово для создания каталога товаров на нашем сайте – прошу заметить, что только визуальными средствами :) Никакого программирования!

В ToolBox выберем элемент GridView из ASP.NET Controls, подраздел Data:

И перетащим его на нашу страницу.

Теперь настроим источник данных.

В открывшемся окне выбираем Access Database, нажимаем Ok.

Указываем путь к нашей базе данных.

Затем нужно выбрать табличку  Products и указать поля, которые бы мы хотели, чтоб отображались на странице. Для простоты я выбрала все поля.

Нажимаем Next, тестируем запрос и Finish. Теперь наша страница отображает содержимое таблицы Products.

Теперь добавим в эту таблицу еще один столбец, с ссылкой на форму заказа. Эта ссылка, кроме того, будем передавать ID выбранного товара, чтобы заказчику потом не пришлось еще раз писать название.

Идем в EditColumns… Выбираем HyperLinkField и Add. Для нового столбца прописываем Properties:

• Text – текст ссылки;
• NavigateUrl – ссылка на форму заказа;
• Полями DataNavigateUrlField и DataNavigateUrlFormat String мы “говорим”, что в форму заказа нужно передать ID товара.

Все готово!

Теперь, если вы сделаете предпросмотр в браузере, то увидите, что добавилась еще одна колонка.

И что при наведении мышки на ссылку “заказать”, определяется соответствующий товару ID.

Теперь давайте создадим непосредственно форму заказа.

Для этого настроим 2 FormView из ToolBox->ASP.NET Controls->Data.

Первая форма будет просто отображать название выбранного в каталоге товара, а вторая будет позволять вводить данные о заказе.

Перетащим FormView, настроим источник данных. Выберем таблицу Products и из полей только Название. Пропишем условие WHERE, которое будет говорить, что ID названия выбранного товара нам передается из каталога :)

Теперь добавим еще одну FormView. Настраиваем по аналогии источник данных. Выбираем таблицу Orders и все поля. В Advanced ставим галочку:

Что позволит нам чуть позднее прописать условие для автоматического ввода Product_ID (которое передается из каталога).

Теперь в Tag Properties укажем DefaultMode: Insert (форма для ввода данных).

А для источника данных пропишем InsertQuery (помните мы галочку в Advanced ставили?), автоматически записывающий в поле Product_ID значение ID, переданного из каталога.

Осталась последняя деталь. Настроить шаблон ввода данных: удалим поле ввода Product_ID (оно будет заполняться автоматически) и с английского переименуем ссылки Insert и Cancel.

Для этого пойдем в Edit Templates

В поле Display выберем InsertItemTemplate

Теперь можем просто удалить поле Product_ID и переименуюем Insert и Cancel.

Форма заказа готова! Давайте протестируем.

Откроем каталог в режиме preview in browser.

Я выбираю товар 3 (в моем каталоге это Набор для ванной комнаты) и нажимаю Заказать.

В открывшейся форме я сразу вижу название выбранного мной товара и ввожу детали заказа:

Когда я нажимаю “Отправить заказ”, мой заказ помещается в таблицу Orders моей базы данных (хотя внешне на страничке ничего не меняется, просто форма становится пустой).

Так, используя только визуальные средства, можно создать простейший каталог товаров и форму заказа!

Вкратце расскажу о том, “как это было” :)

День первый.

Прибыли мы (4 московских маха) в славный город Стамбул. Добрались до замечательного отеля Ceylan Intercontinental Hotel. Заселились в номера и просто с ума сошли от красоты вида, открывающегося из наших номеров :) Во-первых, окна в номерах во всю стену и, во-вторых, выходят они на Босфор и на красивый мост.

Первый день у нас был посвящен ознакомлению с окрестностями и поиску еды :) Теперь я сожалею, что мы не поехали сразу посмотреть город и ознакомиться с азиатской частью города, где и находятся все основные достопримечательности… Так как потом нам так и не удалось этого сделать…

Еще было расстройство по поводу отсутствия бесплатного wi-fi в отеле… В интернете можно посидеть только через провод (одному человеку в единицу времени), только возле стола + это было за дополнительную плату.

День второй

Ознакомительный. Проходил в турецком офисе, который поразил своей красотой и практичностью.

Мы встретились с еще тремя махами: из Санкт-Петербурга, Ярославля и Кемерово! Познакомились с MACH Program Team, послушали турецких executives и в конце дня был небольшой фуршет. Далее в отеле: работа, работа и еще раз работа…

День третий

Начались непосредственно тренинги. Построены они были по такому принципу: от личной эффективности к групповой! Сначала нам рассказывали об энергии, как ее эффективно расходовать, как повышать себе настроение и т.п. Затем нам рассказали, что все люди делятся на 4 группы: Drivers (task oriented, “tell”-people), Analyticals (task oriented, “ask”-people), Expressives (people oriented, “tell”-people) и, наконец, Amiables (самые милые люди: people oriented и “ask”-people). Я оказалась деспотичным Driver, но мне мне захотелось верить в то, что человеческие отношения для меня совершенно не важны и я отнесла себя к кому-то между Driver и Amiable :)

После тренингов нас ждал сюрприз от MACH Program Team – круиз по Босфору.

Обед, танцы и красивые виды.

Изможденные вернулись в отель.

День четвертый

С самого начала нас разделили на группы по 6 человек. Пришло время практиковать командную интернациональную эффективность :) В моей команде была девочка Катя из Финляндии, Сисил из Франции, Сьюзан из Египта, Доминик из Англии и (к моему стыду, забыла, как зовут) парень из Германии.

Задача была построить “сооружение” из имеющегося оборудования так, чтобы по этому “сооружению” можно было бы запустить шарик и он, не падая, дошел бы до конца конструкции. Чем больше шариков получится запустить за 30 секунд, тем круче – это переводится в суммы денег. Сооружения выглядели примерно так:

:)

Вторая половина дня была посвящена presentation skills (мне эта часть показалась самой слабенькой из всех). И подготовке к кульминации winter school 2009 – trade show.

День пятый. Последний

В первой половине дня нам продолжили рассказывать про эффективные коммуникации и о том, как важно быть уверенным в том, что наше сообщение было получено и понято правильно.

И, наконец, (тртртртртртртртр – барабанная дробь!!!) кульминация: Trade Show. Каждая команда (состав тот же, что и в день 3) представляет на импровизированной выставке какой-либо продукт Microsoft – у нас это был Windows 7. Первая часть: первая половина всех команд презентует, вторая половина ходит в качестве посетителей и интересуется продуктами. Вторая часть: наоборот. Один раунд - 8 минут (раундов 7): нужно “заманить” посетителей, рассказать о плюсах продукта и продемонстрировать его. Я демонстрировала новые фичи Windows 7. Оказалось очень тяжело и напряженно 7 раз подряд на английском языке задорно и проворно рассказывать одно и то же… Голова кружилась от шума и напряжения. Для трейд шоу было подготовлено огромное количество рекламных материалов :) В конце всего действа были выбраны победители (ими оказались не мы :), но ту команду надо было видеть: настоящий креатив! я была в восторге от их выступления!)

Вот и все. На этом MACH Winter Shool 2009 завершилась. Нас ждал последний ужин командой русских махов, пара коктейлей и путь домой :)

Впечатления: противоречивые. С одной стороны, было полезно познакомиться с ребятами из разных стран, спросить у них, как они работают, поделиться опытом да и просто пообщаться. С другой, содержание некоторых тренингов было не сильно новым и не сильно полезным в работе. Например, разделение всех людей всего лишь на 4 группы – это как-то не очень в моем понимании. Каждый из нас уже имеет в голове какую-то свою модель подхода к тем или иным типам людей. И каждый из нас достаточно гибок, чтобы в разных ситуациях вести себя по-разному, подстраиваться как-то и менять тактику поведения. Еще мне не очень понравился раздел по Presentations Skills – просто слабоват. Мало полезного, много общих слов.

Темп был очень напряженный! К концу дня все были просто вымотаны.

Но в целом, все понравилось :)

И, как сказал, Стив Балмер: MACH!!!! MACH!!! MACH!!! )))))))

До встречи на MGC&MGX в Атланте!

Итак, начнем :)

Создадим новый сайт (File->New-> Web Site->General->One Page Site).

А в нем новую страницу:

File->New->Page->General->Dynamic Web Template

Создается страничка с тегом <body>, мы удалим этот тег.

Теперь мы создадим простой шаблон. Добавим таблицу, просто, чтобы разделить области сайта. Это же можно сделать с использованием CSS, но это не цель нашего упражнения :)

Для создания таблицы, идем в меню Table->Insert Table. Создадим таблицу с 1 колонкой и 2 строчками.

Теперь добавим картинку (Insert->Picture->From File) в верхний раздел сайта – это будет шапка, которая должна отображаться одинаково на всех страницах сайта.

Вторая строчка таблицы – это изменяемое наполнение страницы.

Чтобы показать, что вторая строка таблицы изменяема, кликаем правой кнопкой мыши по тегу этой строки и выбираем Manage Editable Region (Управление изменяемой областью)

В появившемся диалоговом окне укажим имя этой области в поле Region Name. Нажмем кнопку Add. И Close.

Можно теперь в эту область добавить текст “Изменяемый текст”.

На странице может быть несколько изменяемых областей.

Шаблон готов и теперь нужно его сохранить в правильном формате.

Идем в меню File->Save As и присваиваем файлу имя template.dwt

Теперь в нашем сайте мы можем создавать новые страницы, которые будут выглядеть, как этот шаблон.

Для этого идем в меню File->New->Create from Dynamic Web Template

В открывшемся диалоговом окне выберем шаблон, который мы только что создали.

Вуаля! Страничка готова! И, как вы видите, область страницы с картинкой мы изменить не можем, зато можем писать все, что угодно в редактируемой области.

Использование такого подхода очень удобно. Если на нашем сайте много страничек, которые мы создали на базе одного шаблона, то, чтобы изменить внешний вид всех страничек разом, нам нужно просто изменить файл, который содержит описание этого шаблона (с расширением .dwt).

Например, вернемся в наш файл template.dwt и растянем картинку по всей ширине верхней области сайта.

Сохраним этот файл.

Появляется диалоговое окно, что к этому файлу прикреплен 1 файл, хотим ли мы его обновить.

Нажимаем Yes, хотим :)

Expression Web нам доброжелательно сообщает, что обновил все странички :)

Вот так вот просто создать свой собственный шаблон сайта.

Видео ролик (на английском языке) на эту тему можно посмотреть здесь.

Давайте рассмотрим на простом примере, как это можно сделать.

Для начала создадим новую чистую страницу сайта

И добавим на нее несколько тегов <div>, для разделения важных секций нашей страницы.

Перетащим из Toolbox справа на странице тег <div>

Эта новая область будет посвящена Заголовку страницы. Здесь мы можем разместить логотипы, название компании или другую важную информацию, которую бы мы хотели видеть в верхней части страницы.

Теперь перетащим еще один тег <div>. Здесь будет основная часть страницы: наполнение + меню навигации.

И еще один <div> - для нижней части страницы.

Основную часть страницы нам нужно разделить на 2 части: 1 часть для содержимого и еще 1 для меню навигации.

Кликните внутри второго тега и просто нажмите “enter”, чтобы немного расширить эту область и облегчить размещение тегов внутри нее.

Теперь нажмите на заголовок текущего тега <div> – он подсветится серо-синим.

Из toolbox справа перетащите <div> внутрь этой подсвеченной области.

Нажмите чуть ниже нового тега, на свободном месте и перетащите сюда еще один <div>.

Теперь мы имеем нужное количество секций нашей страницы и нам нужно для каждой из них присвоить уникальный ID selector (ID selector используется, когда нужно определить набор свойств для какого-либо одного элемента или блока элементов, чтобы отделить их от остального содержимого страницы).

Сначала сделаем это для верхней части страницы. Выделим первый тег <div> и в панели задач Apply Styles выберем New Style (новый стиль). Или идем в меню Format->New Style.

В открывшемся окне, в поле Selector напишите #header (заголовок).

# используется, чтобы показать, что это не простой selector, а ID selector.

Поставьте галочку напротив “Apply new style to document selection”. Это поможет нам применить новый стиль именно к тому тегу, который мы выделили. В этом окне мы можем задавать различные свойства: цвет шрифта, фон и т.д., но сейчас мы этого не будем делать, т.к. цель упражнения другая :) Просто нажмем Ok.

То же самое проделаем для тега, предназначенного для “подвала” – нижней части страницы. Присвоим полю selector имя “#footer”.

Теперь самое интересное :)

Нам нужно задать ID selectors для основной части страницы и для начала нам нужно задать стиль тегу <div>, который внутри разделен еще на 2 части. Чтобы его выделить, нажмите:

И опять идем в панель задач Apply Style->New style

Присвоим селектору имя #container (контейнер, основная часть), убедимся, что галочка в “Apply new style to document selection” стоит и нажмем Ок.

Теперь нам нужно назначить ID каждому вложенном тегу <div>.

Выделите первый вложенный  тег и нажмите New Style. Присвоим ему имя “#rightcolumn” (правая колонка). В разделе Category (категория) выберем Position (расположение). И назначим ширину колонки в поле width 200 пикселей

Теперь, чтобы колонка располагалась в правой части страницы пойдем в категорию Layout (разметка) и выберем в поле float (плавающий) значение right. Нажмем Ok.

Теперь выделим оставшийся вложенный тег. И снова New Style. Присвоим имя “#pagecontent” (содержимое страницы). Теперь мы хотим быть уверенными, что страница наша будет хорошо выглядеть в любом броузере (в окне любого размера). Для этого в Category выбираем раздел Box. В области margin (граница) убираем галочку Same for all (так же для всего). И задаем правой границе значение 200 пикселей. Этим мы как раз оставляем нашей колонке справа место для, так сказать, полета :)

Жмем OK.

В итоге у нас получилась такая вот разметка (на картинке не очень хорошо виден пунктир, поэтому я отметила области в порядке их редактирования):

Теперь в первый тег давайте впишем “Заголовок”, во второй – “Подвал”, в третий – “Меню” и в четвертый – “Основной текст”.

Давайте просмотрим, как это будет выглядеть это в браузере (предварительно сохранив) – F12. И если поиграться с размером окна, то можно увидеть, что правая колонка (Меню) как бы “плавает”, но ее ширина фиксирована – 200 пикселей.

Для начала нужно выбрать наиболее подходящий шаблон, который встроен в Expression Web, в меню: File->New->Web Site->Templates

Мне кажется, для мой темы больше всего подойдет такой розоватый блондинистый интерфейс))

Сейчас у нас активен (это можно увидеть слева в Folder List) файл dafault.html и прямо здесь и сейчас мы можем отредактировать нашу главную страницу. Заменить ее заголовок (в моем случае это будет “Мишки Teddy приносят радость”) и исправить приветсвенный текст :) так сказать, написать гимн мишкам))) Скриншот выше показывает нам нашу главную страницу в виде Design, т.е. в виде визуального редактирования – внесенные изменения мы сразу видим так, как они будут отображаться в браузере. Если вы уже более или менее опытный в программировании, то можно редактировать непосредственно код, в отображении Code:

Еще один очень удобный, на мой взгляд, режим Split или режим “и нашим, и вашим” :) чем он удобен? тем что можно редактировать код и сразу же видеть изменения на странице. Что помогает учиться (по крайней мере, мне :)) Еще мне нравится, что в этом представлении можно кликнуть, например, на картинку и тег с описанием этой картинки подсветится серым. 

Про эти три представления странички я также упоминала в одном из первых постов по Expression Web.

Итак, продолжим работать над нашим сайтом :) Заголовок и текст главной страницы я уже заменила, пришло время заменить симпатичных девушек на картинку мишек!

Кликнем на картинку и слева, в Tag Properties, в строке src выберем путь к новой картинке:

Эм…. Размеры, которые стояли для предыдущей картинки, не подходят для моей и она растянулась:

Нужно все в тех же Tag Properties или прямо в коде, в нужном теге убрать параметры height (высота) и width (ширина). Вуаля! Картинка теперь имеет свои значения высоты и ширины по умолчанию (если она слишком большая или слишком маленькая, то можно задать свои значения height и width).

Вот смотрю я на свой сайт и не нравится мне цветовая гамма (не сочетается она с мишками): фон и background заголока… Чтобы их заменить нужно:

1. найти подходящий общий фон страницы и цвет фона заголовка сайта.

2. на своем компьютере найти папку, куда сайт сохранился (в моем случае это: C:\Users\natamish\Documents\My Web Sites\mysite3\). И в папке images заменить файлы background.gif и masthead.gif на файлы с нашими рисунками (только с такими же именами!!! потому что везде в коде прописано именно это имя)

Теперь пришло время изменить надписи в меню навигации слева, дублирующее его меню внизу страницы и шапку сайта! Для этого в Folder List нам нужно двойным кликом открыть файл master.dwt (Шаблон web-страницы - Dreamweaver Template). Изменив этот файл, мы обновим все страницы сайта, что очень удобно (не очень приятно изменять каждую страничку отдельно, тем более, можно что-то пропустить…).

Я хочу, чтобы на моем сайте были следующие пункты меню: Главная, История,  Галерея (с фотками мишек) и  Контакты (если кто-то захочет разделить со мной счастье любви к Teddy) :)

Для этого нужно сделать следующее:

1. Шапку сайта проще всего исправить в визуальном режиме (Design)

2. В коде сменить название “кнопок навигации”

И в панели задач CSS Properties можно изменить цвет фона кнопок (я сделаю его сереньким, чтобы сочетался с новым background и цветом самих мишек :))) Сделать это надо 1 раз (спасибо CSS !!!) и фон всех кнопок сменится.

2. Меняем также дублирующее меню (или на сленге профессионалов: подвал) внизу странице

3. У нас остались лишние пункты меню – их нужно удалить из кода (как для навигации в левой части страницы, так и для подвала внизу страницы), а еще удалим лишние папки (с соответствующими названиями) в Folder List.

Теперь, чтобы посмотреть, что у нас получается в текущем варианте, пойдем File->Preview in Browser (и я выбираю IE 8, потому что именно он стоит у меня).

Нам предлагают сохранить изменения, мы нажимаем Ok.

Вот, что имеем на данный момент :)

Теперь мне хочется, чтобы все посетители моего сайта узнали историю-сказку про моих мишек. На нашем сайте это пункт меню – История (а в Folder List – папка About). Открываем About.htm и меняем!

Еще один способ заменить картинку:

Insert->Picture->From file

И выбирайте нужную картинку :)

Теперь можно добавить нужный текст!

Все остальные странички редактируем по такому же принципу и наполняем их тем, чем душа пожелает!

Сайт готов? Что еще можно сделать в Expression Web:

1. Дать сайту полноценную жизнь и опубликовать его в web :)

Идем Site->Remote Web Site. Настраиваем свойства (Remote Web Site Properties)

Здесь нужно указать адрес вашего ftp сервера.

2. Посмотреть статистику по сайту: Site-> Reports

Ого! на моем сайте о мишках 80 ссылок)) А еще нет ошибок! Ура!

3. Посмотреть “матрицу ссылок” для любого файла. Я, например, хочу проверить, со всеми ли остальными страницами нормально залинковалась моя главная default.html

В общем, отсюда видно, что с главной страницы я могу попасть по ссылкам на все странички из навигации и наоборот :) Значит, все в порядке.

Вот так вот легко и непринужденно, минут за 30 (при наличии идеи и всего содержимого) можно создать свой собственный сайт :)

Пробуйте! Творите!

Дмитрий Сошников, в своих видео-уроках рассказывает о том, как можно создать свою персональную страничку тоже с помощью шаблонов.

P.S. Студентам Expression Web можно скачать бесплатно по программе DreamSpark + бесплатный хостинг от .masterhost

Что такое CSS

Автоматически генерируемые стили

В независимости от того, опытный ли вы в использовании CSS или только начинаете с ними работать, вам нужно понимать, как Expression web автоматически генерирует стили, когда вы используете те или иные фичи.

Когда вы форматируете те или иные элементы на web-страничке, Microsoft Expression Web выполяет это форматирование путем создания новых или редактирования уже имеющихся стилей во внутреннем CSS.

Для работы с этим автоматически сгенерированными стилями можно пользоваться все теми же инструментами, перечисленными выше. Кроме того, закладка CSS в диалоговом окне Page Editor Options предоставляет дополнительные возможности.

Expression Web создает и изменяет стили в автоматическом режиме (который стоит по умолчанию) или ручном режиме. Не важно, какой режим вы выберите, когда редактируете какой-либо элемент без стиля, Expression Web генерирует и применяет новый стиль самостоятельно. Например, если вы хотите изменить цвет у неформатированного текста на вашей странице путем нажатия кнопки Font Color на панели инструментов Common, Expression Web создает новый стиль и применяет его для изменения цвета текста. Затем вы меняете еще и размер – Expression Web добавляет новое свойство в только что сгенерированный стиль.

В ручном режиме у вас есть возможность дополнитльного контролся с помощью панели инструментов Style Application.

Обо всех основных возможностях работы со стилями в Expression Web я рассказала. На практике мы это начнем применять, когда будем вместе создавать наш первый сайт :)

Когда вы открываете web-сайт в MS Expression Web, в окне редактировании автоматически появляется закладка с этим сайтом. Вы можете просматривать содержимое вашего сайта в четырех разных видах. С помощью них вы разрабатываете, публикуете и управляете им. Вот так называются эти виды:

Кстати, Михаил Черномордиков подготовил хорошую подборку ссылок на материалы по Expression Studio на английском языке.

В первом своем посте, посвященном данной теме, я бы хотела дать легкий обзор рабочей области Expression Web.

Итак, Expression Web позволяет создавать и редактировать web-странички и web-сайты. Рабочую область этого тула можно кастомизировать. Сразу после установки рабочая область будет выглядеть следующим образом:

1. Меню и панели инструментов.

Меню отображает список команд. В принципе, для тех, кто когда-либо работал с хотя бы даже офисными программами, интерфейс будет достаточно дружественным. Все пункты меню отображены в верхней панели инструментов.

1. Строка меню
2. Команда меню
3. Панель инструментов
4. Кнопка

MS Expression Web автоматически кастомизирует панели инструментов в зависимости от того, как часто вы используете ту или иную команду или кнопку. 

Чтобы отобразить какую-то дополнительную рабочую панель, которой вам часто придется пользоваться, нажмите правой кнопкой мыши по области панели инструментов правой кнопкой мыши и выберите то, что вам нужно.

Чтобы скрыть ненужные панели:

• нажмите правой кнопкой мыши по области панели инструментов правой кнопкой мыши и уберите галочки напротив названий ненужных панелек.

• Если панель инструментов не закреплена, то просто нажмите

2. Окно редактирования

1. Файлы, которые вы открываете в Expression Web, отображаются в виде закладок. Активный файл подсвечивается (чтобы быстро переключиться с одного окна на другое, используйте комбинации клавиш CTRL+TAB или CTRL+SHIFT+TAB).

2. Чтобы закрыть активное окно, нажмите .

3. HTML теги появляются на Quick Tag Selector. Чтобы выбрать нужный тег, нужно по нему кликнуть.

4. Окно редактирования может отображаться в трех видах:

• Дизайн - создавать и редактировать странички можно с помощью дизайнерских инструментов (просто перемещая ручками различные элементы);
• Разбивка - предоставляет одновременный доступ к Дизайнерскому окну и окну Кодирования;
• Кодирование - можно вручную менять непосредственно HTML-код.

Чтобы быстро переключиться с одного вида страницы, на другой используйте комбинации клавиш CTRL+PAGE UP или CTRL+PAGE DOWN.

Вы можете изменить внешний вид Окна редактирования в режиме Дизайн. Например, можно изменить цвет фона различных элементов, чтобы можно было легко их найти.

Чтобы кастомизировать цвета и стили текста окна редактирования в режиме “Дизайн”:

1. В меню Tools нажмите Page Editor Options.

2. В окне Page Editor Options, на закладке Color Coding, выберите Design view settings.

3. Под Display items выберите элементы, которые вы хотите изменить. Определите нужный цвет переднего и заднего фона и стиль текста в соответствующих выпадающих списках: Item foreground, Item background, Font style options.

4. Чтобы сбросить все настройки, нажмите кнопку Reset Defaults.

3. Панели задач

Панели задач в MS Expression Web помогают выполнить работы, оперативно предоставляя инструменты, которые необходимы для работы. Все панели задач можно найти в меню Task Panes. Сразу несколько панелей задач могут быть открытыми. Можно менять их размер и расположение.

По умолчанию, при первом запуске Expression Web с обеих сторон от Окна редактирования отображаются следующие панели задач: Folder List, Tag Properties, Apply Styles и Toolbox.

Панель задач Toolbox

Используйте панель задач Toolbox, чтобы перетащить ваши HTML-элементы на страничку. Код, который Expression Web создает при этом, зависит от DocType на вашей странице. Например, если ваш DocType - HTML, когда вы перетаскиваете элемент BREAK, Expression Web создает тег <br>. Если ваш DocType - XHTML, Expression Web создает тег <br />.

1. Эти HTML-теги можно перетаскивать из панели задач Toolbox на вашу страничку.

2. Эти элементы контроля формы можно перетащить на вашу страничку.

3. Эти ASP.NET элементы из панели задач можно перетащить на вашу страничку.

Панель Задач Folder List

Панель задач Folder List содержит список всех папок и страниц вашего web-сайта. Вы можете раскрывать папки нажатием кнопки и “сворачивать” папки нажатием кнопки . (Быстрый доступ к этой панели задач через сочетание клавиш ALT+F1)

1. Нажмите кнопку , чтобы создать новую папку.

2. Чтобы создать новую страницу, нажмите .

3. Ваш web-сайт отображается, как корневая папка.

4. Странички и папки вашего сайта отображаются в виде дерева файлов.

4. Строка состояния

Строка состояния отображает информацию о текущих активностях, таких как: режим редактирования, режим выполнения и т.д. Также здесь отображается информация о файле, который сейчас редактируется: размер, HTML схема и CSS схема.

Вот так выглядит Microsoft Expression Web. Более подробную информацию можно почитать на английском языке здесь.