Визуальный HTML редактор Microsoft Expression Web как инструмент начинающему Web дизайнеру

Теперь казавшаяся пустой страница выглядит примерно так, как образец. Теперь, видя основанные на CSS разделы макета (им соответствуют тэги DIV) в окнах конструирования и кода, можно приступать к добавлению содержимого. Не забывать сохранять изменения. При этом Expression Web попросит ввести имя и заголовок самой HTML-страницы и связанного с ней CSS-файла. Хотя страница еще далека от завершения, нажав клавишу F12, чтобы посмотреть, как она сейчас выглядит в браузере, принятом по умолчанию.

 

Работа с Web-страницами.

Чтобы не ≪побить≫ ссылки, связывающие страницы между собой, для сохранения, открытия, переименования, изменения заголовка и удаления страниц следует пользоваться только программой Expression Web (а не Windows Explorer).

Чтобы сохранить страницу:

Выполнить команду File => Save (Файл => Сохранить) (Ctrl+S), или нажать кнопку Save на панели инструментов Common или щелкнуть правой кнопкой мыши по вкладке страницы и выберите из контекстного меню команду Save. Если это первая сохраняемая в данном сайте страница, то в диалоговом окне Save As предлагается назвать ее default , исходя из предположения,

 то это начальная страница сайта.

Кроме того, странице по умолчанию назначается заголовок Untitledl. И нажать кнопку Save, чтобы сохранить страницу с указанным именем и заголовком. Так же можно назначить файлу другое имя и заголовок. Для этого нужно ввести имя в поле File name и нажать кнопку Change title (Изменить заголовок). В окне Set Page Title ввести вместо присвоенного по умолчанию заголовка свой собственный. Теперь в диалоговом окне Save As отображаются введенные вами имя и заголовок страницы. Нажав кнопку Save, чтобы применить изменения и закрыть окно. В списке файлов на панели Folder List и на язычке вкладки появляется новое имя.

Чтобы открыть страницу необходимо выполните одно из следующих действий. Чтобы открыть страницу в том же сайте, дважды щелкнуть по ее имени в списке на панели Folder List. Чтобы открыть страницу в другом сайте, выбрать команду File => Open (Файл => Открыть) и в диалоговом окне перейти на нужную страницу.

Чтобы изменить имя страницы нужно, щелкнуть по имени файла в списке на панели Folder List. Немного подождать и щелкнуть еще раз, чтобы имя стало редактируемым. Не отпуская кнопку мыши, отметить все имя. Ввести новое имя, нажать клавишу Enter. Файл будет переименован.

Для того чтобы изменить заголовок страницы, щелкнуть правой кнопкой мыши по имени файла в списке на панели Folder List и выбрать из контекстного меню пункт Properties (Свойства). В поле Title на вкладке General (Общие) ввести новый заголовок и нажать ОК.

 Для удаления страницы, щелкнуть правой кнопкой мыши по имени файла в списке на панели Folder List и выбрать из контекстного меню команду Delete (Удалить). Появится диалоговое окно с просьбой подтвердить удаление страницы. После нажатия Yes страница будет удалена.

 

Работа с текстом.

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

Ввод и выделение текста.

Все стандартные приемы, применяемые в текстовых редакторах, - ввод, выделение, перемещение, вырезание и копирование, - работают и в Expression Web. Чтобы добавить текст на Web-страницу. Нужно открыть страницу и щелкнуть мышью по тому месту, куда необходимо добавить текст. Место вставки отмечается мигающей вертикальной чертой. Набираемый текст появляется в месте вставки.

Чтобы выделить текст на странице. Это можно сделать несколькими способами: Нажав левую кнопку мыши и, не отпуская ее, провести курсором по тексту, который нужно выделить. Чтобы выделить одно слово, достаточно дважды щелкните по нему. Для выделения абзаца, трижды щелкнув в любом его месте. Щелкнув мышью в начале (или в конце) текста и нажатии клавиш Ctrl+Shift, пока весь нужный текст не будет выделен. Подведя курсор к началу строки, а когда он превратится в стрелку, щелкнуть мышью для выделения всей строки. Подвести курсор к началу строки, а когда он превратится в стрелку, дважды щелкните мышью для выделения всего абзаца.

Чтобы переместить текст: необходимо выделить текст, который необходимо переместить. Перетащить выделенный текст мышью в новое положение, выделенный текст окажется в новом месте.

Для того чтобы вырезать или скопировать текст нужно выделить текст, который нужно вырезать или скопировать. Выбрать из меню команду Edit => Cut (Правка => Вырезать) (Ctrl+X) или щелкнув правой кнопкой мыши и выбрать из контекстного меню команду Cut (Вырезать). Выделенный текст будет сохранен в буфере обмена. Можно так же выбрать из меню команду Edit => Сору (Правка => Копировать) (Ctrl+C) или щелчком правой кнопки мыши и выбрать из контекстного меню команду Сору (Копировать). Выделенный текст будет сохранен в буфере обмена.

 

Вставка текста.

В Expression Web есть два способа вставки текста, с разной степенью контроля. Наиболее употребительная команда Paste (Ctrl+V) позволяет управлять стилем вставляемого текста. Команда Paste Text, для которой нет сокращенной комбинации клавиш, позволяет управлять разрывом строк и пропусками во вставляемом тексте.

 

Чтобы вставить текст необходимо перейти в режим конструирования. Щелкнув мышью в том месте страницы, куда нужно вставить текст, скопированный из этой же страницы или совсем из другой программы, например Microsoft Word. Выполнив команду Edit => Paste (Правка => Вставить) или щелкнув правой кнопкой мыши и выбрать из контекстного меню команду Paste (Вставить). Текст из буфера обмена вставляется в указанное место. По умолчанию при этом сохраняется форматирование, заимствованное из исходного документа. Если нужно сохранить старое форматирование, надо щелкнуть правой кнопкой мыши по иконке Paste Options (Параметры вставки), которая расположена внутри вставленного текста. Выбрав из контекстного меню команду Remove Formatting (Удалить форматирование), тогда вставленный текст будет отформатирован в соответствии со стилем объемлющего документа. Так же выполнив команду Edit => Paste Text (Правка => Вставить текст). В окне Paste Text выбрать один из пяти вариантов. Вставленный текст форматируется в соответствии с выбранным решением.

 

Работа с графикой.

Если заголовки и текст определяют смысловое содержание страницы, то графика придает ей дополнительную привлекательность. С самого начала будет описано и показано, как добавлять и позиционировать картинки. А после объяснено, как с помощью панели инструментов Pictures (Картинки) изменять их внешний вид.

Добавление картинок.

Expression Web позволяет добавлять  картинки разными способами: перетаскивать  на страницу, искать в файловой системе или копировать непосредственно из цифровой камеры.

 

 Для того чтобы добавить  картинку. Нужно открыть Web-страницу и щелкнуть мышью в том месте, где должна быть картинка. Выбрать из меню команду Insert => Picture (Вставка => Картинка) и указать в меню, из какого источника ее брать. Найти нужную картинку и нажать кнопку Insert (Вставить). Ввести краткое описание картинки в поле Alternate text (Альтернативный текст) и, если необходимо, подробное описание в поле Long description. После нажатия ОК картинка появится на странице. Если нужно, нажав клавишу Enter, чтобы следующий за ней заголовок или текст начинался с новой строки. Если добавленная картинка еще не входила в состав файлов сайта, то откроется окно Save Embedded Files (Сохранить прикрепленные файлы). Нажав кнопку Change Folder (Изменить папку), чтобы перейти в ту папку сайта, где хранятся картинки. Затем нажать ОК, и изображение будет сохранено в указанной папке.

 

Перемещение картинки. Если щелкнуть по картинке, то в углах и по краям появятся небольшие квадратики-манипуляторы. Не отпуская кнопку мыши, перетащите картинку в другое место. Отпустите кнопку, и картинка займет новое положение. В зависимости от того, как текст и заголовки должны обтекать картинку, можно изменить параметры ее стиля.

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

Чтобы задать выравнивание по горизонтали. Нужно дважды щелкнуть по картинке. В окне Picture Properties (Свойства картинки) перейти на вкладку Appearance (Внешний вид). По умолчанию параметр Wrapping style (Обтекание) установлен в None (Нет), а поля равны нулю. В зависимости от того, как текст должен обтекать картинку, нужно выбрать значение Left (Слева) или Right (Справа). Задать способ выравнивания картинки по вертикали позволяет раскрывающийся список. Чтобы закрыть окно и применить внесенные изменения, нажмите ОК. Взаимное расположение текста и картинки изменится в соответствии с заданными параметрами.

Для задания выравнивания по вертикали. Дважды щелкнув по картинке и в окне Picture Properties перейти на вкладку Appearance. Неудивительно, что в раскрывающемся списке Alignment (Выравнивание) обычно выбрано значение Default (По умолчанию). Установив в этом списке нужное значение, точнее одно из следующих: Default (По умолчанию), Тор (По верхнему краю), Middle (По центру), Bottom (По нижнему краю). Остальные способы современные браузеры не поддерживают. Расположение картинки относительно соседнего текста изменяется. Так же можно просто изменить поля и отступы с помощью перетаскивания. В принципе, можно задавать их индивидуально для каждой картинки, но лучше создать таблицу CSS, определив в ней несколько стилей для полей и отступов, которые затем применять к картинкам глобально по всему сайту.

Так же можно добавить рамку вокруг картинки. Находясь в режиме конструирования или в комбинированном режиме, щелкнуть по картинке. Выбрать из меню команду Format => Borders and Shading (Формат => Границы и заливка). Диалоговое окно Borders and Shading по умолчанию открывается на вкладке Borders (Границы). Задав тип (Setting), стиль (Style), цвет (Color) и толщину (Width) рамки, ориентируясь на образец в области Preview, нажав ОК. Диалоговое окно закроется, а вокруг картинки будет нарисована рамка.

Добавление поля вокруг картинки. Так же находясь в режиме конструирования или в комбинированном режиме, щелкнуть по картинке. В углах появятся тонкие бежевые линии. Если провести курсор над такой линией, его форма изменится на двустороннюю стрелку. Потянув линию мышью, чтобы изменить горизонтальное поле. При этом появится прямоугольная область, по которой можно судить о величине поля. Так можно добиться нужной величины, отпустив кнопку мыши. Точно так же можно задать вертикальное поле. Так же нужно сохранить изменения (Ctrl+S).

 

Добавление отступов. Находясь в режиме конструирования или в комбинированном режиме, щелкнуть по картинке, одновременно удерживая нажатой клавишу Shift. В углах появятся тонкие голубые линии. Потянув линию мышью, чтобы добавить отступ от соответствующей стороны. При этом появится прямоугольная область, по которой можно судить о величине отступа.

 

2.3 Создание ссылок.

Главное достоинство Web – возможность переходить с одной страницы на другую, где бы та ни находилась. Для этого служат гиперссылки. Гиперссылки, или просто ≪ссылки≫, бывают нескольких видов: внешние, которые ведут на другую страницу; внутренние, которые ведут на другое место внутри данной страницы; ссылки для отправки электронной почты и ссылки внутри картинки. Expression Web позволяет легко создавать все такие ссылки.

 

Добавление ссылок.

Одни ссылки ведут на страницы, находящиеся вне данного сайта, другие – на страницы вашего же сайта. В первом случае Expression Web автоматически создает абсолютные ссылки, во втором - относительные.

Абсолютная ссылка включает полный URL. Например http://www.waywest.net/expression/. Относительная - только имя файла и папку, в которой он находится: /ExamplePages/creatinglinks.htm.

У относительных ссылок есть то преимущество, что при любой реорганизации сайта Expression Web позаботится об их правильности. Чтобы сослаться на страницу внутри сайта. Нужно выделить текст, который должен стать ссылкой, щелкнув правой кнопкой мыши и выбрав из контекстного меню команду Hyperlink (Ссылка). По умолчанию в диалоговом окне Insert Hyperlink (Вставить ссылку) предполагается, что ссылка будет вести на другую страницу текущего сайта. В центральной области окна нужно указать, куда должна вести ссылка, и после нажать ОК. Окно закрывается, а выделенный текст становится ссылкой на другую страницу.

Чтобы сослаться на еще не существующую страницу. Необходимо выделить текст, который должен стать ссылкой, щелкнуть правой кнопкой мыши и выбрать из контекстного меню команду Hyperlink (Ссылка). Нажав кнопку Create New Document (Создать новый документ) в диалоговом окне Insert Hyperlink. Присвоить новой странице имя и, если нет необходимости прерывать текущую работу, отметить переключатель Edit the new document later (Редактировать новый документ позже). Окно закроется, а в список на панели Folder List будет добавлена новая пустая страница.

Чтобы сослаться на внешнюю страницу. Необходимо выделить текст, который должен стать ссылкой, щелчком правой кнопкой мыши и выбрать из контекстного меню команду Hyperlink (Ссылка). Нажать кнопку Browse the Web (Обзор Web). Если браузер еще не запущен, он запустится сейчас. Перейти на страницу, на которую должна вести ссылка, и нажать комбинацию клавиш Alt+Tab. Адрес страницы появится в поле Address в окне Insert Hyperlink. Закрыть Окно закроется, и выделенный текст станет ссылкой на внешнюю страницу.