Первое, с чего мы начнем, это установка фоновой заливки нашей страницы. В главном меню редактора KompoZer перейдите по пути "Формат - Цвет и заливка страницы" (Format - Page Colors and Background). Откроется окно "Цвета и фон страницы" (Page Colors and Background), рисунок которого представлен ниже:
В нем выберите опцию "Использовать другие цвета" (Use custom colors), затем опуститесь по списку вниз, до надписи "Фон" (Background) и щелкните левой кнопкой мыши на окошке справа от этой надписи. Откроется еще одно окно, которое является стандартным окном выбора цвета:
В правом верхнем углу находится таблица готовых цветов, используя которую, можно выбрать нужный вам. В примере своей статьи я выбрал голубой цвет - третий столбец справа и третья строка сверху. Если в таблице нет нужного вам цвета, вы можете определить его самостоятельно, указав несколькими возможными путями. Например, задав с помощью Hex-кода или же по имени (правый нижний угол окна); воспользовавшись окошками задания цветов в нижнем левом углу (Red-Green-Blue); окном выбора цвета в левом верхнем углу.
Самым простым способом получения нужного цвета является явное задание его значений в поле ввода Hex или же в полях Red, Green, Blue (прим. переводчика: что является равнозначным действием, так как цвет может быть представлен в шестнадцатеричном коде Hex или в десятичном коде RGB). После ввода значений, выбранный цвет отобразится в визуальном виде в окошке, расположенном под надписью "Последний выбранный цвет" (Last-picked color). Другим точным способом подбора нужного цвета является использование полосы градиента с ползунком (расположена сверху от полей ввода значений RGB).
Если для фоновой заливки страницы планируется применить готовое изображение, необходимо указать ее месторасположение с помощью адресной строки ввода, расположенной внизу окна настройки цветов страницы. На практике рисунок, который будет использоваться в качестве фоновой заливки, может располагаться где угодно. Поэтому лучше всего разместить его на сервере - в нашем случае это директория, являющаяся зеркалом будущего сайта, расположенная на локальном жестком диске компьютера. Поставьте галочку напротив надписи "Относительная ссылка" (Url is relative to page location) (прим. переводчика: это нужно для того, чтобы указать, что ссылка на изображение является относительной. Такая настройка очень полезна при переносе локальной версии сайта на хостинг, где может быть другое расположение файлов, что может привести к нарушению связей и неработоспособности самой ссылки). Будьте осторожны с чрезмерным использованием изображений на сайте и на страницах, так как большое количество картинок может ухудшить удобочитаемость сайта. Большое количество картинок на сайте отвлекает внимание посетителя от главной составляющей - текста. Также примером неудачного применения изображений может быть черный текст, расположенный поверх картинки с темным фоном.
Результатом выбора фоновой заливки страницы является изображение главного окна KompoZer, представленное ниже:
Следующим нашим шагом будет изменение заголовка страницы. Для этого перейдем в меню редактора KompoZer по пути "Формат - Заголовок и свойства страницы" (Format - Page Title and Properties):
В открывшемся окне свойств введите заголовок страницы в поле "Заголовок" (Title). Также здесь можно установить явным образом язык страницы (Language) и направление текста (Writing direction) (прим. переводчика: два последних значения являются необязательными. Особенно это касается направления ввода текста, которое по умолчанию для западноязычных стран имеет значение слева направо). Для своей страницы-примера я выбрал заголовок "Моя Домашняя Страница" (My Home Page). Конечно, вы можете озаглавить страницу для себя так, как сочтете нужным.
Затем нужно определиться со шрифтами, которые будут использоваться на странице для отображения текста. По умолчанию стоит значение "Переменный" (Variable), но я предпочитаю использовать строго определенные шрифты, в частности это Helvetica и Arial. Оба эти шрифта признаны как наиболее удобочитаемые многими независимыми обзорами (прим. переводчика: можно сказать иначе - это наиболее "безопасные" шрифты. То есть такие шрифты, которые одинаково отображаются в разных браузерах и версиях этих браузеров, а также под разными операционными системами).
В главном меню редактора KompoZer перейдите по пунктам "Формат - Шрифт" (Format - Font), затем выберите тот шрифт, который вы бы хотели использовать. Хотя список представленных в KompoZer шрифтов довольно обширный, не стоит выбирать любой из них. Дело в том, что вы не можете быть уверенными, что выбранный вами шрифт, хотя он и установлен на вашей операционной системе, также будет установлен и у посетителей вашего сайта. В результате web-страница будет отображаться совсем не так, вами было задумано. Чтобы оградить себя от подобных проблем, наилучшим выбором будут только первые восемь шрифтов из этого списка. В этом случае имеется наибольшая гарантия того, что страница будет отображаться одинаково во всех браузерах и операционных системах.
Теперь осталось перейти еще к одному пункту. Выпадающий список "Body Text" служит для форматирования текста внутри страницы. Щелкаем на нем левой кнопкой мыши и выбираем "Heading 1". Тем самым, мы будем создавать форматированный текст в виде заголовка первого уровня. Помещаем курсор в основное окно редактора KompoZer и печатаем в нем "Добро пожаловать на мою Web страницу" (Welcome To My Web Page), без кавычек. Жмем Enter после ввода этой строки. При этом обратите внимание, что в раскрывающемся списке форматирования текста произошли изменения - значение "Body Text" снова вернулось на свое место. Также обратите внимание, что введенный вами текст отобразился шрифтом по умолчанию, а не тем, который вы выбрали перед этим. Чтобы он отображался тем шрифтом, которым вы бы хотели, снова выделите введенный текст и отформатируйте его нужным вам шрифтом.
Введите еще немного текста на страницу. Для этого подойдет краткое вступление, говорящее о том, чем бы вы хотели поделиться со своими читателями. В результате в окне KompoZer страница примет вид, наподобие такого:
После текста введите несколько ссылок на ваши любимые Интернет-ресурсы, по одному в строке, также, как вводите обычный текст - просто напечатайте их. Затем выделите строку-ссылку и щелкните на иконке "Ссылка" (Link) на панели инструментов KompoZer. Откроется диалоговое окно "Свойства ссылки" (Link Properties). Так как мы создаем внешнюю ссылку, указывающую на расположенный в Интернете сайт, то вставляем полный адрес этого сайта в верхнюю строку окна. Если ссылка указывает на другую страницу нашего сайта, то в строку нужно поместить только файловое имя данной страницы (например, links.html).
В окне "Свойства ссылки" перейдем в раздел "Цель" (Target) и установим галочку напротив надписи "Открыть ссылку в" (Link is to be opened). Проверим, что в списке выбора ниже этой надписи стоит "в новом окне" (in a new window). Эта настройка заставит браузер посетителя открыть внешний Интернет-сайт (на который указывает ссылка) в новом окне, в то время как ваш собственный останется открытым в предыдущем окне.
Повторите вышеописанный шаг для всех ссылок, которые вы ввели на страницу. В результате этих действий ваша web-страница примет вид, наподобие рисунка:
Вставка изображения
Теперь давайте вставим картинку на страницу. Дважды нажмите клавишу Enter, чтобы опуститься вниз на две строки. Потом нажмите сочетание клавиш Ctrl+B, чтобы вводимый текст был полужирного начертания и введите текст "Хоста", также без кавычек. Снова нажмите сочетание клавиш Ctrl+B, чтобы снять полужирное начертание с дальнейшего вводимого текста. И опуститесь на строку ниже, нажав клавишу Enter.
Я уже поместил заранее подготовленное изображение в папку "images", расположенную в директории будущего сайта. Поэтому мне достаточно щелкнуть по иконке "Изображение" (Image) на панели инструментов KompoZer и выбрать картинку в папке "images". В окне "Свойства изображения" (Image Properties) выбираем местоположение картинки на одноименной вкладке "Местоположение" (Location). При этом обратите внимание, что после загрузки изображения в окно надпись "Относительная ссылка" (URL is relative to page location) автоматически активируется. Это говорит о том, что вставляемая картинка находится в той же директории, что и все остальные файлы сайта. В поле "Всплывающая подсказка" (Tooltip) введите поясняющий текст, который будет появляться каждый раз, когда посетитель наведет курсор мыши на изображение. В поле "Альтернативный текст" (Alternate text) введите текст, описывающий содержимое картинки. Этот текст будет виден посетителям сайта, пока само изображение будет загружаться окне браузера (прим. переводчика: иногда пользователи отключают отображение картинок в браузере, поэтому данный альтернативный текст также полезен. Кроме того, задание альтернативного текста является одним из обязательных условий оптимизации web-страниц для поисковых машин, таких как Google или Yandex).
Перейдите на вкладку "Внешний вид" (Appearance) окна "Свойства изображения" (Image Properties). В разделе этой вкладки "Обтекание изображения текстом" (Align Text to Image) находится выпадающий список, начальным значением которого является параметр "К низу" (At the bottom). Открываем этот список и выбираем в нем "Обтекать справа" (Wrap to the right), чтобы текст страницы обтекал картинку справа. В разделе "Поля" (Spacing) можно настроить отступы для текста, на которые он будет отодвигаться от изображения. Задаются отступы в полях ввода "Слева и Справа" (Left and Right) и "Сверху и Снизу" (Top and Bottom). По умолчанию текст прилегает к картинке вплотную, что не слишком хорошо смотрится на web-странице. Размер полей задается в пикселях - я обычно устанавливаю поля в пять (5) пикселей. По-моему, размер такого поля наиболее подходящий - не слишком большой и не слишком маленький. Вокруг изображения можно также создать окаймляющую рамку, которая устанавливается в поле ввода "Сплошная граница" (Solid Border). Единицы измерения (толщины) рамки также задаются в пикселях. Для изображений, вставляемых мною на страницы, я обычно устанавливаю рамку толщиной в один (1) пиксел. Мне кажется, что выделенные таким способом картинки не "растворяются" на общем фоне страницы.
Размер вставляемого изображения был изменен заранее. Я всегда предпочитаю подготавливать размер вставляемых на страницу картинок. Такой подход позволяет избежать бесполезных загрузок слишком больших изображений. Но имеется и другой способ изменить размер изображения непосредственно в редакторе KompoZer. Для этого переходим на вкладку "Размеры" (Dimensions), переключаем радиокнопку со значения "Реальный размер" (Actual Size) на значение "Другой размер" (Custom Size) устанавливаем в полях ввода ширину (Width) и высоту (Height) для изображения.
При этом обязательно нужно обратить внимание на галочку "Пропорционально" (Constrain). Если она установлена (надпись активна), то размеры изображения изменяются пропорционально, что предотвращает искажение картинки. Когда все готово, щелкаем на кнопке ОК и картинка вставляется в web-cтраницу.
Когда изображение будет помещено на страницу в окне редактора KompoZer, помещаем курсор мыши рядом с ней и вводим пояснительный текст. При этом текст будет обтекать вставленную картинку с правой стороны и отступать от нее на пять пикселей. После ввода текста у вас должно получиться нечто похожее на рисунок ниже:
Осталось сохранить готовую страницу под именем index.html в директории web-сайта.