Основы создания Web-страниц (стр. 2 из 3)

Перемещение по странице

Перемещение по содержимому страницы (если оно, конечно, есть) производится традиционным способом с помощью клавиатуры. Например, для прокрутки страницы на один экран вверх или вниз используются клавиши <PageUp> и <PageDown> соответственно; комбинация клавиш <Ctrl>+<Home> приведет вас на самый верх страницы, a <Ctrl>+<End> — в ее конец. Для движения по странице можно также использовать стрелки, а полосы прокрутки, как обычно, продвигают окно в горизонтальном и вертикальном направлении.

В Редакторе Frontpage реализованы 25 наиболее популярных клавиатурных комбинаций Microsoft Word, так что пользователи Office будут чувствовать себя в Редакторе, как дома.

Текст

Чтобы поместить на страницу текст, просто-напросто введите его с клавиатуры. Посмотрим, как на новую страницу Human Resources (Персонал) сайта RoasterNet вставить текст:

1. Командой Sew меню File создайте в Редакторе новую страницу. В диалоговом окне New выберите Normal Page (Обычная страница) и нажмите кнопку ОК. На вашем экране появится пустая страница (рис. 6.2), в правом верхнем углу которой находится мигающий курсор.

Рис. 6.2. Новая страница в Редакторе

2. Наберите слова Cascade Coffee Roasters.

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

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

Все то, что вы введете, будет так же выглядеть в браузере. Чтобы начать новый абзац, нажмите клавишу <Enter>, как в Word.

Подсказка

Для вырезания, копирования и вставки в Редакторе используются стандартные комбинации клавиш: <СМ>+<Х>(Вырезать), <С1г1>+<С>(Копировать), <Ctrl>+<V> (Вставить). Другой вариант — щелчком правой кнопки откройте контекстное меню и выберите соответствующую команду из него.

Вырезание, копирование и вставка текста

Процедура вырезания, копирования и вставки текста (так же, как и любых других элементов) в Редакторе Frontpage выглядит точно так же, как в приложениях Office. Редактор использует буфер обмена аналогично приложениям Office: вы можете вырезать и копировать любые фрагменты в другие открытые в Редакторе страницы или в документы других приложений. Просто вырежьте или скопируйте нужный фрагмент в буфер, перейдите в документ (предварительно его необходимо открыть) и выполните вставку. При этом форматирование текста может оказаться частично утраченным — это зависит от приложения, в которое вы переносите свой материал. Например, если вы переместите текст, набранный шрифтом различного кегля, в Блокнот (Notepad), то в Блокноте весь текст будет иметь одинаковый, установленный по умолчанию кегль.

Удаление текста

Удаление текста или других элементов так же просто. Его можно сделать несколькими способами: отметив удаляемый фрагмент, можно затем нажать клавишу <Del>, а можно выбрать в меню Edit опцию Clear.

(Совет)

Если вы захотите вернуть обратно удаленный материал, выберите в меню Edit опцию Undo или нажмите кнопку Undo на панели инструментов. Подробнее об этом рассказано в следующей главе.

Разумеется, вы можете удалять символы и целые слова перед курсором и после него. Чтобы удалить слово справа от курсора, нажмите <Ctrl>+<Del>, а слово слева от курсора — <Ctrl>+<Backspace>. Попробуйте этот прием — из всех комбинаций клавиш Редактора Frontpage и Microsoft Word эти используются, пожалуй, реже всех, но они существенно ускорят процесс редактирования.

Материал из файлов Microsoft Office

Одной из самых сильных сторон Frontpage является его способность органично усваивать материал из файлов Microsoft Office. Такая дружба Front-page и Microsoft Office экономит массу времени. Например, если информация, которую вы хотели бы поместить на страницу сайта Frontpage, находится в файлах Word или Excel, то вам не придется вводить ее в Редакторе Frontpage заново.

Копирование и вырезание из файлов Office

Рис. 6.3 иллюстрирует, с какой легкостью можно переместить материал из Word в Редактор Frontpage. Девушка из отдела кадров "Cascade Coffee Roasters" по привычке начала набирать текст для домашней страницы RoasterNet в Word, но администратор сервера компании строго указал ей, что следует использовать Frontpage. И пусть написано-то было всего несколько строк, но зачем же делать лишнюю работу, надо просто перенести текст из Word в Редактор Frontpage.

Рис. 6.3. Перенос информации из Word в Редактор Frontpage

Это делается так: нужный текст выделяется в Word, копируется в буфер, затем мы переключаемся в Редактор и вставляем текст из буфера туда, где мы хотели бы его видеть. Frontpage автоматически преобразует его в формат HTML.

Перетаскивание файлов Office в Редактор

Теперь перейдем к более интересным вещам. Вспомним предыдущий пример и предположим, что у нас в Word набрано не несколько строк, а несколько страниц. Разумеется, можно не полениться конвертировать их в файлы HTML, благо соответствующих программ сейчас имеется много. Но мы-то знаем, что это не нужно, ведь в компании "Cascade Coffee Roasters" используют Frontpage.

Разберемся, как ставить ссылки на файлы Office, а также как открывать целые файлы в Редакторе Frontpage и автоматически преобразовывать их в файлы HTML:

- Если файл Office уже импортирован в Проводник в составе сайта (т. е. на него внутри сайта имеются ссылки), то можно подцепить этот файл в Проводнике и перетащить его на страницу, открытую в Редакторе. Чтобы это сделать, щелкните в Проводнике на значке соответствующего файла (это будет, соответственно, значок Word или Excel) и, удерживая левую кнопку мыши нажатой, перетащите файл на видимую часть страницы Редактора. Frontpage по имени файла создаст ссылку на него

- Можно перетаскивать файлы Office из любого места в Windows прямо на страницу, открытую в Редакторе. Так, например, вы можете перетащить файл из проводника Windows и даже с рабочего стола (desktop) Windows. Frontpage конвертирует файл в HTML и располагает его на открытой странице. Если в файле содержатся ссылки, то они преобразовываются в ссылки Frontpage, сохраняя при этом свои привязки

Совет

Для того чтобы в Редакторе вставить файл в страницу, можно воспользоваться командой File меню Insert (Вставить).

Кстати, имейте в виду, что Редактор при этом должен быть запущен, но не обязательно активен. Файл можно перетащить на кнопку Редактора на панели задач (taskbar) Windows и секунду подождать, удерживая кнопку мыши нажатой. После этого Редактор станет активен и вы сможете опустить файл на открытую страницу.

Совет

Редактор позволяет перетаскивать и вставлять файлы любого формата, поддерживаемого Office. Например, в Редактор можно перетаскивать документы WordPerfect или рабочие листы Lotus 1-2-3.

Заголовки

Одним из условий эффективного дизайна Web-страниц является разумное использование заголовков. Избыток крупных заголовков, скорее всего, сделает вашу страницу трудно читаемой, а страницы, бедные заголовками, часто унылы на вид и сложны для восприятия. Заголовки помогают структурировать представленную на странице информацию — в точности как в газете или журнале.

На примере одной из страниц все того же сайта RoasterNet рассмотрим простой случай использования заголовков. Пусть это будет домашняя страница бухгалтерии — Accounting. На этой странице мы хотели бы видеть список имен сотрудников, к которым впоследствии будут привязаны ссылки на их собственные страницы. Последовательность ваших действий будет такова:

1. Создайте в Редакторе новую страницу, выбрав в меню File опцию New. В диалоговом окне New Page выберите Normal Page и нажмите кнопку ОК. В Редакторе появится пустая страница, в левом верхнем углу которой располагается мигающий курсор.

2. Из списка стилей на панели форматирования выберите Heading 1 (Заголовок 1). Заметьте, что в списке перечислены шесть уровней заголовков. Шапка страницы должна быть выделена как следует — например, как заголовок первого уровня. В редакторе Frontpage заголовок будет оформлен с новой строки как отдельный абзац.

3. Введите основной заголовок страницы. Accounting, как показано на рис. 6.4.

Рис. 6.4. Этот заголовок оформлен как заголовок первого уровня; обратите внимание на то, что в списке стилей выбрана опция Heading 1

4. Начнем вводить имена сотрудников. Нажмите <Enter>; курсор перейдет на новую строку, после этого выберите из списка стилей Heading 3 (Заголовок 3). Под только что введенной вами шапкой появится строка, выглядящая как заголовок третьего уровня; наберите в ней Kathy.

5. Повторяя шаг 4, введите имена остальных сотрудников бухгалтерии: EU, Тот, Janine и Kevin. Ваша страница будет выглядеть так, как показано на рис. 6.5.

Рис. 6.5. Домашняя страница Accounting Рис. 6.6 иллюстрирует относительные размеры всех шести уровней заголовков.

Рис. 6.6. Соотношение размеров заголовков разного уровня

В вашем браузере эти заголовки могут выглядеть несколько иначе, чем в Редакторе Frontpage, поскольку браузер сам определяет, как именно они должны выглядеть. Это не имеет большого значения, т. к. в любом случае форматы этих заголовков задаются таким образом, чтобы заголовок более высокого уровня (наивысший уровень — первый) всегда был крупнее заголовка более низкого уровня. Как правило, чем важнее заголовок, а следовательно, выше его уровень, тем крупнее шрифт, тем больше интервалы до и после него.