Алексей Гладкий - Веб-Самоделкин. Как самому создать сайт быстро и профессионально

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

Рис. 3.3. Настройка программы, вкладка Стиль

Вы можете выбрать любой фоновый цвет, а также цвет шрифта. Для этого нажмите кнопку Выбратьи выполните соответствующие настройки в открывшемся окне. По умолчанию в качестве фонового цвета предлагается белый, а в качестве цвета шрифта – черный. Сам шрифт выбирается из раскрывающегося списка в поле Шрифт, а его размер – в поле Размер. Чтобы восстановить настройки, используемые в программе по умолчанию, нажмите кнопку Восстановить исходные значения.

Содержимое вкладки Основныепоказано на рис. 3.4.

Рис. 3.5. Настройка параметров шрифта

На данном рисунке представлены настройки шрифта, которые используются в программе по умолчанию. Если вы хотите применить какой-то другой шрифт – выделите в программном коде соответствующий фрагмент текста, после чего нажмите кнопку Шрифти укажите настройки (тип шрифта, его начертание, размер, и др.). После нажатия в данном окне кнопки ОКвыделенный текстовый фрагмент будет заключен в контейнер между тегами . Причем эти теги будут задействованы с соответствующими выполненным настройкам атрибутами, регламентирующими тип шрифта, его цвет и иные параметры (например, как в листинге 2.1).

Листинг 2.1. Фрагмент программного кода с настройками шрифта

Этот файл создан для примера

В данном случае настройки шрифта применены к тексту Этот файл создан для примера.

Справа от кнопки Шрифтнаходится четыре кнопки, предназначенные для выравнивания выделенного текстового блока соответственно по центру, по левому краю, по правому краю и по ширине (названия этих кнопок отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При нажатии любой из них в программный код страницы будут внесены соответствующий изменения.

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

Следующая кнопка называется Параграф. Она предназначена для разбиения текста на параграфы. При ее нажатии в программный код документа вставляется тег с атрибутом

. При необходимости вы можете вручную добавить атрибут align: в зависимости от значения ( left, centerили right) он позволяет выровнять параграф соответствующим образом по горизонтали.

Далее следует кнопка, которая называется Перенос строки. Уже судя по отображаемым на ней символам ( BR) нетрудно догадаться, что она предназначена для перевода текста на следующую строку, то есть для создания абзаца. При ее нажатии в программный код (а именно – в то его место, где в данный момент находится курсор) будет вставлен тег
(фрагмент такого кода показан в листинге 2.2).

Листинг 2.2. Перевод текста на следующую строку

Этот файл создан для примера.
Если нужно, будет сформирован еще один такой файл.

В данном примере вторая фраза будет начата с новой строки.

Следующие четыре кнопки предназначены для создания неупорядоченных, нумерованных и маркированных списков. При их нажатии в программный код добавляются соответствующие теги (например, при создании неупорядоченного списка – теги

и , и т.д.).

ПРИМЕЧАНИЕ

С помощью соответствующих кнопок вы можете формировать маркированные списки как с квадратными, так и с круглыми маркерами.

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

• Мелкий шрифт– при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице уменьшенным шрифтом относительно расположенного рядом текста.

• Крупный шрифт– при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице укрупненным шрифтом относительно расположенного рядом текста.

• Нижний индекси Верхний индекс– эти кнопки предназначены для сдвига выделенного слова или текстового фрагмента соответственно вниз или вверх относительно расположенного рядом текста (иначе говоря, включается нижний или верхний индекс).

• Форматированный текст– данную кнопку удобно использовать для вставки в программный код веб-страницы уже отформатированного текста. У этого текста будут сохранены все пробелы и переносы.

• Текст фиксированной ширины– при нажатии данной кнопки выделенный текст будет отображаться в окне Интернет-обозревателя моноширинным шрифтом.

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

Вставка специальных элементов

Возможности программы предусматривают вставку в контент веб-страницы специальных элементов – гиперссылок, изображений, фреймов и т. д. Необходимый для этого инструмент находится на вкладке Специальные, содержимое которой показано на рис. 3.6.

Рис. 3.7. Инструментарий для формирования таблиц

Как видно на рисунке, данная вкладка содержит четыре кнопки. Рассмотрим назначение каждой из них.

С помощью кнопки Таблицав документ вставляются теги

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

Кнопки Строкаи Столбецпредназначены соответственно для вставки в документ новых строк и столбцов таблицы. При нажатии кнопки Строкав программный код добавляются теги

, при нажатии кнопки Столбец– теги создан для примера.

Кнопка Гот. таблицапозволяет вставить в документ заготовку готовой таблицы (то есть таблицу, состоящую из одной ячейки). Например, откроем с помощью команды главного меню Файл 4Открытьуже знакомый нам тестовый файл Test.html (см. рис. 2.11), выделим в нем слова Эта страница, и нажмем кнопку Гот. таблица. В результате программный код веб-страницы будет выглядеть так, как показано в листинге 2.7.