Лекция № 1.

Вставка и форматирование текста. Гиперссылки.

«Тексты бывают разные - чёрные, белые, красные... Полужирные и подчёркнутые...»

    Итак, уважаемые студенты, мы продолжаем знакомиться с редактором для создания web-страниц FrontPage. В этой лекции мы разберём тексты, ссылки и их оформление.

    Приступим-с. Если вы не поленились выполнить домашнее задание к предыдущей лекции, сейчас у вас должна быть чистая пустая страница под названием "new_page_1.htm". Откройте её в окне своего редактора, пожалуйста (напоминаю, что это можно сделать, скомандовав "File - Open..." или нажав на кнопочку , а затем выбрав из списка нужную страницу).

    Задание: посмотрите на страницу. Смотрите, смотрите... Видите, в чём недостаток?.. Правильно! Скучно, товарищи! На такое безобразие посетители сайта точно смотреть не согласятся. Значит, надо придать этой странице ценность, поместив на неё какую-нибудь важную (или не очень) информацию. Эта самая информация может принять вид рисунка, видео или какой-нибудь скачущей по экрану надписи. Но мы не будем углубляться в такие дебри и для начала изучим ввод и оформление простых текстов.

    Ввести текст на страницу - проще некуда. Для этого поставьте страницу в режим Normal, ткните курсором в любое место (по умолчанию, мигающий курсор появится в верхнем левом углу экрана автоматически, при создании или открытии страницы) и... набирайте текст. В общем, эта часть процесса полностью идентична работе в Microsoft Word. Клавиатура, как видите, та же, буквы те же и даже нажатие на Enter по прежнему приводит к созданию нового абзаца. :)

    Итак, наберите какой-нибудь текст, а точнее - "Это тестовое предложение." Да-да, то, что в кавычках, и печатайте. Напечатали? Ок. Переходим к форматированию текста. Во-первых, поставьте курсор в начало предложения и потяните его за собой. После того, как вы выделите предложение (фон текста станет чёрным, а буквы - белыми), отпустите мышь и, наведя её куда-нибудь в район текста, щёлкните правой кнопкой мыши. В выпавшем меню нас интересуют первые три команды - Cut, Copy и Paste. Думаю, вы уже знаете, что они выполняют команды "Вырезать", "Копировать" и "Вставить". С помощью их вы сможете взять текст откуда угодно (в том числе, и со страницы, опубликованной в Интернете) и вставить на вашу страничку, а с вашей страницы - вырезать текст и вставить его, например, в Блокнот. Замечу лишь, что эти три команды вы сможете найти также в директории Edit (плюс команда Delete, удаляющая текст без копирования, как в случае с Cut) и во втором ряду кнопок сверху: (Вырезать), (Копировать) и (Вставить).

    Выбрав в выпадающем меню команду Font или нажав Format - Font в верхнем ряду, вы увидите следующее окно (по умолчанию): 

    Причём, если не выделён никакой текст (или текст безо всякого форматирования), появится окно именно с таким параметрами, как на рисунке (хотя названия шрифтов могут отличаться). Если же будет выделена часть текста, то параметры этого окна будут соответствовать не всему тексту, а конкретно выделенному месту. Изменив параметры в этом окне, вы измените и внешний вид текста. Попробуйте изменить его шрифт, выбрав понравившийся из предложенных в окне с названием Font (хотя давайте для начала поставим не любой, а Verdana - он должен быть у всех). Видите, буквы в нижнем окне - Preview - изменились. Они показывают, как будет выглядеть ваше предложение (точнее, вид его оформления) в результате сохранения внесённых в параметры изменений. Во втором окне - Font style -  вы можете выбрать стиль текста: Regular (обычный, по умолчанию), Italic (курсив, то есть наклонённый), Bold (полужирный) или Bold Italic (полужирный курсив). Кстати, к тому же эффекту приводит нажатие на кнопки или (в зависимости от того, какой у вас редактор - англоязычный или русифицированный) в третьем ряду сверху: В - полужирный, I - курсив и U - подчёркнутый. Сделайте ваш текст полужирным и наклонённым. 

    В третьем окне -  Size - можно установить размер шрифта. Нормальный размер (по умолчанию) соответствует третьему (12 пунктов).

    В меню Color вы можете выбрать из палитры желаемый цвет текста. По умолчанию там стоит чёрный цвет, но может быть и любой другой.

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

    Если в некоторых эффектах пример не соответствует описанию, значит, у вас не подключена данная опция. Так, например, при установке эффекта Blink шрифт может оставаться прежним.

    Итак, измените параметры в каждом окне. После этого нажмите на Ok (сохранение внесённых изменений и выход из меню), Cancel (выход из меню без сохранения внесённых изменений) или Apply (предварительный просмотр, но не в окошке внизу, а на самом тексте в окне редактора).

    Уф-ф, с этим разобрались. Осталось немного...

    Теперь обратите свой взор на первые три меню в третьем ряду кнопок сверху. Там вы увидите такую картину:

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

    Далее следуют уже известные вам кнопки жирного, курсивного и подчёркнутого начертания текста, а вот после них...

    Три этих нехитрых с виду кнопочки могут сделать очень многое - вы убедитесь в этом сами. Первая кнопка выравнивает выделенный текст по левому краю, вторая - по центру и третья - по правому краю. Этот приём очень удобен для форматирования и выделения из общей массы различного вида заголовков, надписей и лозунгов. :) Например:

Глава 1. Как я ездил к бабушке.

Даёшь каникулы!!!

"Тексты бывают разные..."

    Думаю, тут всё понятно. Следующие четыре кнопки, объединённые в один блок, выглядят так:

    При нажатии на первую кнопку ваш текст автоматически превратится в список, и при каждом нажатии Enter он будет дисциплинированно выравниваться по левому краю и самостоятельно нумероваться. Вторая кнопка делает, в общем-то, тоже самое, но вместо цифр у вас будут генерироваться кружочки или квадратики. Если вы выделите часть текста и будете нажимать четвёртую кнопку, ваш текст будет сужаться и сужаться, пока наконец на каждой строчке не останется по одному слову. Третья кнопка, как ни странно, отменяет действия четвёртой.

    И, наконец, с помощью последних двух кнопок в этом ряду вы сможете выбрать цвет фона текста и самого текста соответственно. Например:

1. Текст
2. Текст

    Ну, думаю, для форматирования и выравнивая текста вышеописанных приёмов вам будет вполне достаточно. :)

    Осталось разобрать гиперссылки. Итак, если кто не слышал, гиперссылка - это своеобразный "мостик", связывающий две страницы. С помощью гиперссылок можно попасть с одной страницы на другую и вернуться назад, например. Гиперссылка может иметь вид текстовой ссылки, кнопки, рисунка и т.д.

    Чтобы поставить гиперссылку, нужно иметь то, на что мы будем ссылаться. Поэтому сейчас сохраните изменения на вашей тренировочной странице и создайте ещё одну страницу, чистую (пусть она называется "new_page_2.htm"). Создали? Отлично! Теперь сохраните её в ту же папку, где находится первая страничка (вы должны были создать отдельную папку для вашего сайта ещё в прошлый раз). Теперь с помощью директории Windows (надеюсь, вы ещё не закрыли этот редактор?..) вернитесь к первой странице и под теми экспериментами, что мы проводили сегодня, напечатайте: "Страница 2". Теперь выделите этот текст и нажмите правую кнопку мыши. В выпавшем меню Выберите команду "Hyperlink...". У вас откроется такое окно

:

    Видите надпись "URL" и следующее за ней окошко?.. Здесь вы можете вбить адрес страницы, на которую хотите поставить ссылку (если она уже есть в Интернете). Если же вы ссылаетесь на неопубликованную страницу, находящуюся на вашем компьютере, нажмите вторую справа от окошка кнопку (с папкой и лупой). Из выпавшего списка выберите страницу, на которую хотите сослаться (в нашем случае это new_page_2.htm) и нажмите OK. Редактор сам допишет адрес в окне слева URL. Первая кнопка (с лупой и земным шаром... Эээ... то есть мне кажется, что это земной шар...) поможет вам поставить ссылку на страницу в Сети (для этого в браузере перейдите на нужную страницу в автономном режиме). Третья, с конвертиком - на e-mail. Для этого щёлкните по кнопке с конвертом и вбейте требуемый e-mail в появившемся окне. Причём, если вы хотите, можно добавить тег, автоматически генерирующий в письме заданную тему. Для получения этого эффекта вбейте в окно URL следующий тег: mailto:flash_night@mail.ru?subject=Запись в студенты, где вместо "flash_night@mail.ru" будет стоять ваш e-mail, а вместо "Запись в студенты" - нужная вам тема.

   Если вы хотите, чтобы страница, на которую вы ставите ссылку, открывалась в новом окне (а не на месте открытой страницы), то должны выбрать команду New Window в подменю Target frame.

   Во всех случаях для установления параметров ссылки и закрытия окна необходимо нажать кнопку OK.

   Для исправления и удаления гиперссылки вы должны выделить гиперссылку, нажать правую кнопку, войти в меню Create Hyperlink и соответственно изменить или удалить текст ссылки в окне URL.

   По умолчанию все ссылки имеют синий цвет, а после нажатия становятся бардовыми, что иногда совсем не вписывается в дизайн страницы. Поэтому после того, как поставите ссылку, не забудьте выделить её и поставить нужный вам цвет через кнопку . Интересная особенность: если вы сразу нажмёте нужный цвет, то он не установится. Поэтому сначала выберите любой другой цвет, а уж потом установите нужный.

   И последнее по порядку, но не по важности. :) Нажмите правую кнопку и из выпавшего меню выберите Page Properties... В открывшемся окне выберите вкладку Background и поставьте галочку напротив надписи "Enable hyperlink rollover effects". Видите, кнопка Rollover Style "ожила"?.. Нажмите на неё. У вас появится окно Font. Да нет, это только название одинаковое! На самом деле в этом окне вы можете задать параметры (шрифт, цвет, размер и т.д.) всех ссылок (то есть их внешнего вида). Но фокус не в этом. Попробуйте изменить настройки в этом меню, закройте окно нажатием на кнопку OK, и... придайте ссылкам на вашей странице совсем другой вид (то есть другой шрифт, размер...). А теперь перейдите в режим Preview и попробуйте навести курсор на ссылку. Видите, она начинает меняться под мышью! Например:

Это изменчивая ссылка

Но имейте в виду: изменяться будут ВСЕ ссылки на странице!

На главную
Курс FrontPage