Шрифт:
Чтобы открыть созданный ранее файл веб-страницы (например, для редактирования), нужно выполнить команду главного меню Файл Открыть, вызываемую также нажатием комбинации клавиш Ctrl+O. Также для этого можно воспользоваться кнопкой Открыть, находящейся в инструментальной панели (напомним, что названия кнопок инструментальных панелей отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране открывается окно, в котором нужно указать путь к требуемому файлу и нажать кнопку Открыть. Отметим, что этот файл должен иметь расширение html, htm или php.
Чтобы сохранить выполненные в текущем файле изменения, нужно выполнить команду главного меню Файл Сохранить, которая вызывается также нажатием комбинации клавиш Ctrl+S. Также для этого можно воспользоваться в инструментальной панели кнопкой Сохранить. При первом сохранении файла на экране открывается окно, в котором нужно указать его имя, а также путь для сохранения. Впоследствии при работе с данным файлом такое окно открываться не будет, а просто сохранятся изменения.
При необходимости вы можете сохранить выполненные изменения в отдельном файле под другим именем. Для этого нужно выполнить команду главного меню Файл Сохранить как, после чего в открывшемся окне ввести имя файла и указать путь для его сохранения.
С помощью команды Файл Открыть в браузере вы можете в любой момент посмотреть, как будет выглядеть текущая веб-страница в окне Интернет-обозревателя. Помните, что перед этим необходимо сохранить все выполненные изменения.
Ввод и редактирование текстового контента веб-страницы
Как мы уже отмечали ранее, вся работа с контентом веб-страницы ведется в рабочей области окна программы, а с помощью расположенных вверху вкладок выбирается требуемый режим работы и, соответственно, инструменты, которые необходимы в данный момент.
Для выполнения основных действий по работе с текстовым контентом предназначены инструменты, которые находятся на вкладке Общие (содержимое данной вкладки показано на рис. 3.1). Рассмотрим порядок использования каждого из них.
С помощью кнопки Шрифт осуществляется переход в режим настройки параметров шрифта. При нажатии данной кнопки на экране отображается окно, которое показано на рис. 3.5.
Рис. 3.5. Настройка параметров шрифта
На данном рисунке представлены настройки шрифта, которые используются в программе по умолчанию. Если вы хотите применить какой-то другой шрифт – выделите в программном коде соответствующий фрагмент текста, после чего нажмите кнопку Шрифт и укажите настройки (тип шрифта, его начертание, размер, и др.). После нажатия в данном окне кнопки ОК выделенный текстовый фрагмент будет заключен в контейнер между тегами <font> </font>. Причем эти теги будут задействованы с соответствующими выполненным настройкам атрибутами, регламентирующими тип шрифта, его цвет и иные параметры (например, как в листинге 2.1).
Листинг 2.1. Фрагмент программного кода с настройками шрифта
<body>
<font size="4" face="Terminal" color="Black" >Этот файл создан для примера </font></body>
В данном случае настройки шрифта применены к тексту Этот файл создан для примера.
Справа от кнопки Шрифт находится четыре кнопки, предназначенные для выравнивания выделенного текстового блока соответственно по центру, по левому краю, по правому краю и по ширине (названия этих кнопок отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При нажатии любой из них в программный код страницы будут внесены соответствующий изменения.
Далее следуют кнопки, с помощью которых можно включить полужирное, курсивное, подчеркнутое или зачеркнутое начертание шрифта. Если, например, вы хотите отобразить какое-то слово или словосочетание полужирным шрифтом – выделите его, а затем нажмите кнопку Ж. В результате выделенный фрагмент будет заключен в теги <b> </b>, которые, как известно, включают полужирное начертание.
Следующая кнопка называется Параграф. Она предназначена для разбиения текста на параграфы. При ее нажатии в программный код документа вставляется тег с атрибутом <p class="text"></p>. При необходимости вы можете вручную добавить атрибут align: в зависимости от значения (left, center или right) он позволяет выровнять параграф соответствующим образом по горизонтали.
Далее следует кнопка, которая называется Перенос строки. Уже судя по отображаемым на ней символам (BR) нетрудно догадаться, что она предназначена для перевода текста на следующую строку, то есть для создания абзаца. При ее нажатии в программный код (а именно – в то его место, где в данный момент находится курсор) будет вставлен тег <br> (фрагмент такого кода показан в листинге 2.2).
Листинг 2.2. Перевод текста на следующую строку
<body>