Как вставить гиперссылку в композере

Как создать гиперссылку с помощью KompoZer

Возможность создать ссылку в документе, которая приведет вас к другому документу, возможно, в сети на полпути по всему миру, возможно, является одной из самых важных причин, по которой была изобретена Всемирная паутина. Эти ссылки, называемые гиперссылками, являются «H» в HTML (HyperText Markup Language). Без гиперссылок веб-интерфейс не был бы очень полезен. Не было бы ни поисковых систем, ни социальных сетей, ни баннерных объявлений (хорошо, большинство из нас может стоять, чтобы посмотреть, как они идут).

Когда вы создаете свои собственные веб-страницы, вам захочется создавать гиперссылки, а у KompoZer есть инструменты, которые упрощают добавление ссылок любого типа. Примерная страница, представленная в этом руководстве, будет содержать ссылки на другие веб-сайты в четырех категориях, на другие части одной и той же веб-страницы и для запуска сообщения электронной почты. Я начну с заголовка и четырех

H3 заголовки для каждой категории. На следующей странице мы добавим некоторые ссылки. 01 из 05

Создание гиперссылки с помощью KompoZer

Доступ к инструментам гиперссылки KompoZer осуществляется нажатием кнопки «Ссылка» на панели инструментов. Чтобы создать гиперссылку:

1. Поместите курсор на страницу, где вы хотите, чтобы ваша гиперссылка отображалась.
2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно Свойства ссылки.
3. Первое поле, которое необходимо заполнить, — это текстовое поле «Ссылка». Введите текст, который вы хотите отобразить на странице для своей гиперссылки.
4. Второе поле, которое необходимо заполнить, — это поле «Расположение ссылок». Введите URL-адрес страницы, на которую ваша гиперссылка примет пользователя при нажатии. Рекомендуется скопировать и вставить URL-адрес из адресной строки вашего браузера. Вы гораздо менее склонны совершать ошибку таким образом, и знаете, по крайней мере, во время создания вашей ссылки, что страница жива и эта ссылка не нарушена.
5. Нажмите «ОК», и диалоговое окно «Свойства ссылки» закроется. Теперь ваша ссылка появится на вашей странице.

В большинстве браузеров по умолчанию гиперссылка будет отображаться синим подчеркнутым текстом. Вы можете применить свои собственные стили к гиперссылкам с KompoZer, но пока мы будем придерживаться базовой гиперссылки. Рекомендуется просмотреть страницу в веб-браузере и нажать на ссылки, чтобы убедиться, что они работают.

Создание привязки с помощью KompoZer

Существует другой вид гиперссылки, который приводит вас к другой части той же веб-страницы при нажатии. Эта гиперссылка называется привязной ссылкой, а область страницы, на которую вы попадаете, когда вы нажимаете эту ссылку, называется якорем. Если вы когда-либо использовали ссылку «назад к началу» внизу веб-страницы, вы щелкаете по ссылке на якорь.

KompoZer позволяет создавать привязки, на которые вы можете ссылаться, с помощью инструмента Anchor на панели инструментов.

1. Нажмите на область своей страницы, где вы хотите привязать. То есть, когда вы хотите, чтобы просмотрщик страниц выполнялся при нажатии на ссылку привязки. В этом примере я нажал кнопку «F» в заголовке «Любимая музыка».
2. Нажмите кнопку «Якорь» на панели инструментов. Откроется диалоговое окно «Именованные якорные свойства».
3. Каждому якорю на странице требуется уникальное имя. Для этого якоря я использовал название «музыка».
4. Нажмите «ОК», и вы должны увидеть, и символ якоря появится в месте, где вы хотите привязать. Этот символ не будет отображаться на вашей веб-странице, так как KompoZer показывает вам, где ваши якоря.
5. Повторите процедуру для любых других областей страницы, на которую вы хотите, чтобы пользователи могли перейти. Если на странице есть много текста, разделенных заголовками или другим логическим разделителем, привязки — это простой способ навигации по странице.

Затем мы создадим ссылки, которые читают читателя на созданных вами якорях.

Создание навигации по страницам с помощью KompoZer

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

Создание гиперссылок на якоря с помощью KompoZer

Теперь, когда у нас есть наши привязки и текст, который мы будем использовать для навигации по страницам, мы можем превратить эти простые текстовые фрагменты в ссылки. Мы снова будем использовать кнопку «Ссылка», но на этот раз она будет работать немного по-другому.

1. Выберите текст, который вы хотите превратить в ссылку. В этом примере я выбрал текст «Любимая музыка», который находится в первой ячейке таблицы вверху страницы.
2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно Свойства ссылки.
3. В этом случае мы выделили текст, прежде чем нажимаем кнопку «Ссылка», поэтому раздел «Текст ссылки» окна уже заполнен и не может быть отредактирован. Нажмите стрелку вниз в разделе Расположение ссылок. Вы увидите список якорей, созданных вами на предыдущих шагах. В этом примере я выбираю # музыкальный якорь.
4. Нажмите «ОК». Текст «Любимая музыка» на панели навигации превращается в ссылку, которая заставит зрителя перейти к этому разделу на странице при нажатии.

Вы заметите, что каждый именованный якорь в раскрывающемся меню имеет перед ним знак «#». Так вы создадите ссылку на якорь в HTML. «#» Перед именем привязки сообщает браузеру, что эта ссылка приведет вас в другое место на той же странице.

Создание гиперссылки с изображения с помощью KompoZer

Знаете ли вы, что вы можете создать ссылку из изображений, а также текст? KompoZer позволяет сделать это, используя только несколько кликов. Здесь я вставил маленькое изображение значка, показывающее стрелку вверх и текст «TOP» в нижней части страницы. Я собираюсь использовать это изображение в качестве ссылки, чтобы вернуться в начало страницы.

1. Щелкните правой кнопкой мыши изображение и выберите «Свойства изображения и ссылки» на ярлыке контекста. Откроется диалоговое окно «Свойства изображения».
2. На вкладке «Местоположение» вы увидите имя файла и изображение эскиза, которое уже заполнено. Вы должны ввести текст в текстовое поле «Альтернативное». Это то, что появляется, когда вы перемещаете мышь над изображением, а также то, что читается программой чтения с экрана, когда человек с ослабленным зрением читает веб-страницу.
3. Перейдите на вкладку «Связь». Здесь вы можете выбрать якорь из меню, как и мы с привязными ссылками. Фактически, это изображение используется как привязка. Я выбрал якорь #Links_Of_Interest, который вернет нас к вершине.
4. Нажмите «ОК». Изображение будет отображаться в верхней части страницы при нажатии.

Как создать новое сообщение с помощью канцелярских принадлежностей в Outlook

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

Как добавить форму с помощью KompoZer

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

Как создать гиперссылку в Dreamweaver

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

Создание "Домашней страницы" в редакторе KompoZer

Данная презентация составлена для практической работы в 11 классе в редакторе KompoZer. К учебнику Семакина. По шагово расписано знакомство с интерфейсом редактора, что опозволяет учащимся выполнить задание.

Просмотр содержимого документа
«Создание «Домашней страницы» в редакторе KompoZer»

«Домашняя страница»

• Познакомить учащихся с процедурой создания простого сайта в в редакторе KompoZer.
• Рассмотреть основные приемы рабо­ты с текстом, гиперссылками и графикой .

Интерфейс программы KompoZer

• Интерфейс программы (рис 2.10) состоит из следующих элементов :
• 1. Меню. Содержит пункты для выполнения всех операций, воз­можных в KompoZer .
• 2. Панель компоновки . Содержит кнопки наиболее часто ис­пользуемых операций.
• 3. Панель форматирования . С помощью панели форматирова­ния можно выбирать шрифт, менять его цвет и размер , в ыде­лять блоки текста, создавать нумерованные и маркированные списки, выравнивать текст ( влево, вправо, по центру, по ши­рине).
• 4. Панель вкладок . KompoZer позволяет одновременно редакти­ровать несколько документов, используя разные вкладки для каждого открытого документа .
• 5. Панель режимов редактирования показывает , в каком режи­ме просматривается текущий документ. Доступны режимы Дизайн, Объединенный и Код .
• 6. Рабочее окно . В рабочем окне происходит непосредственно со­здание страницы .
• 7. Менеджер сайта позволяет загрузить созданную страницу на
• сервер .

Глобальные настройки страницы

• Формат — Цвета и фон страницы . Для задания стандартных цветов — выбрать радиокнопку Цвета поль­зователя по умолчанию, для задания собственных цветов -радиокнопку Использовать цвета , после чего выбрать из палитры нужные цвета . Для задания фонового рисунка — выбрать соответствующий файл с изображением в поле Фоновое изображение .

Способы выбора цвета

• выбором цвета (оттенка) из дискретной или непрерывной палитры цветов;
• получением цвета ( оттенка) путем смешивания красного, зеленого и синего цветов (RGВ -модель);
• формированием цвета через параметры Оттенок , Насыщен­ность, Яркость ;
• • вводом в поле Имя английского названия цвета ( например: Yellow) ;
• • вводом в поле Нех 16 -ричного кода цвета ( если он вам из­вестен )

• Формат, Заголовок и свойства страницы .
• Введем в поле Заголовок текст «Домашняя страница Ф. И. » и с помощью кнопки Выбрать кодировку зададим тип кодирою Windows- 1251.

Работа с текстом

• • установим курсор в первую строку рабочего окна;
• • выберем шрифт Arial (Формат � Шрифт) ;
• • стиль абзаца — Заголовок 1 (Формат� Абзац);
• • размер шрифт а — medium (Формат� Размер);
• • цвет текста — #СС6600 (Формат � Цвет текста);
• • стиль текста — полужирный (Формат � Стиль текста );
• • выравнивание — по центру (Формат� Выравнивание) .
• После задания настроек введите нужный текст .
• Помимо заголовка, добавим на страницу следующий текст :
• Дорогие друзья! Меня зовут Петя Иванов. Я рад приветствовать вас на своей домашней странице. Здесь я расскажу вам о себе , своей семье и друзьях .

Создание текстовых гиперссылок

• выбрать пункт Вставка � Ссылка ( или нажать кнопку Ссылка на Панели компоновки);
• • в первое поле диалогового окна ввести текст гиперссылки ;
• • во втором поле диалогового окна указать URL-aдpec объек­та, на который указывает гиперссылка, или ввести имя файла с указанием пути к нему

Создадим три гиперссылки

• выберем пункт Вставка � Ссылка и введем текст гипер­ссылки : «0 себе», имя файла — about_me .html .
• 1) Мои родители (имя файла — parents .h tml );
• 2) Мои друзья (имя файла — friends .h tml) .

• Сохранение страницы
• Чтобы сохранить созданную страницу, необходимо выбрать

пункт Файл � Сохранить , выбрать нужную папку и ввести имя файла — index .html .

Как вставить гиперссылку в композере

Библиотека сайта rus-linux.net

Согласно стандарту HTML на сайте обязательно должна присутствовать одна страница, имеющая имя index.html . Это делается для следующей цели. Если посетитель вводит в адресную строку браузера адрес вашего сайта, но не указывает, какую конкретно страницу на нем он хотел бы посетить, то браузер по умолчанию ищет и загружает главную страницу с именем index.html . Таким образом, на диаграмме сайта блок с именем Home Page должен соответствовать файлу index.html .

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

• текстовый контент
• изображения
• фон страниц сайта (это может быть сплошная заливка цветом или фоновая картинка)
• шрифт, который будет использоваться на страницах сайта
• ширина страниц сайта
• будут ли на сайте файлы, доступные для скачивания

Теперь вы можете себе представить, насколько важно предварительное планирование. Усилия, потраченные на создание плана, стоят этого. Детально проработанная схема в будущем значительно облегчит построение самого сайта.

После того, как будет разработан проект, следующим шагом будет создание файловой структуры будущего сайта на локальном диске, в которой будут храниться все файлы, составляющие сайт и его содержимое. На рисунке, представленном выше, в файловом менеджере Thunar отображено содержимое директории — зеркала сайта, который послужит образцом для нашего примера. В этой директории есть папка "files", предназначенная для хранения файлов, доступных для скачивания посетителями. В папке "images" содержатся изображения, используемые для оформления страниц сайта или же статей на страницах. Я настоятельно рекомендую всегда создавать зеркало web-сайта на жестком диске вашего компьютера, в специально отведенной для этого директории.

Создание первой страницы

Первое, с чего мы начнем, это установка фоновой заливки нашей страницы. В главном меню редактора 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-сайта.

Заключение

Итак, в этой статье мы продолжили изучение HTML-редактора KompoZer, начатое в предыдущей выпуске июльского журнала PCLinuxOS. Здесь мы научились создавать простую Web-страницу. Как вы могли заметить, KompoZer является достаточно функциональной программой. В следующей статье мы продолжим знакомство с возможностями KompoZer.

Урок 2. Создание web-сайта в KompoZer

Рассмотрим процедуру создания простого сайта в редакторе KompoZer. Для начала опишем интерфейс программы и перечислим основные приемы работы с текстом, гиперссылками и графикой.

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

Интерфейс программы KompoZer

Интерфейс программы (рис. 5) состоит из следующих элементов:

– Меню. Содержит пункты для выполнения всех операций, возможных в KompoZer.

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

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

– Панель вкладок. KompoZer позволяет одновременно редакти­ровать несколько документов, используя разные вкладки для каждого открытого документа.

– Панель режимов редактирования показывает, в каком режи­ме просматривается текущий документ. Доступны режимы Дизайн, Объединенный и Код.

– Рабочее окно. В рабочем окне происходит непосредственно со­здание страницы.

– Менеджер сайта позволяет загрузить созданную страницу на сервер.

Рисунок 5. Интерфейс программы KompoZer

Рассмотрим работу с текстом, гиперссылками и изображения­ми на примере создания «Домашней страницы Пети Иванова».

Наш сайт будет состоять из четырех страниц:

– О себе (about_me.html);

– Мое расписание (rasp.html);

– Мои учителя (teacher.html).

Для начала следует запустить программу KompoZer, после чего программа войдет в режим создания новой web-страницы. Далее необходимо задать глобальные настройки страницы.

Глобальные настройки страницы

1. Для изменения глобальных настроек страницы (цвета фона, фонового рисунка, цвета гиперссылок, основного цвета текста) выберите пункт Формат – Цвета и фон страницы. Для задания стандартных цветов – выберите радиокнопку Цвета поль­зователя по умолчанию, для задания собственных цветов – радиокнопку Использовать цвета, после чего выберите из палитры нужные цвета. Для задания фонового рисунка – можно выбрать соответ­ствующий файл с изображением в поле Фоновое изображение.

Выбор цвета (рис. 6) можно осуществлять несколькими способами:

– выбором цвета (оттенка) из дискретной или непрерывной палитры цветов;

– получением цвета (оттенка) путем смешивания красного, зеленого и синего цветов (RGB-модель);

– формированием цвета через параметры Оттенок, Насыщен­ность, Яркость;

– вводом в поле Имя английского названия цвета (например, Yellow);

– вводом в поле Hex 16-ричного кода цвета (если он вам из­вестен).

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

Рисунок 6. Окно палитры цветов

2. Выберите для нашего сайта черный цвет текста, коричневый цвет всех гиперссылок и светло-желтый цвет фона.

3. К глобальным настройкам страницы относятся также заголо­вок окна страницы и тип кодировки документа. Их можно задать с помощью пункта меню Формат – Заголовок и свойства страни­цы.

Введите в поле Заголовок текст Домашняя страница Пети Иванова и с помощью кнопки Выбрать кодировку задайте тип кодировки Windows-1251. Нажмите ОК.

4. Результат показан на рисунке ниже.

Работа с текстом

Для ввода текста достаточно просто установить курсор в рабо­чее окно и начать ввод.

Если Вы копируете текст из другого документа, то необходимо очищать все стили, которые могут быть перенесены из другого документа. Для того, чтобы очистить стили, выделите вставленный на web-страницу текст и выберите из главного меню программы команду Формат — Убрать все стили текста .

Работа с текстом в программе KompoZer очень напоминает работу в текстовом процессоре Word.

5. Добавьте в первую строку нашей главной страницы сайта заголовок: «Домаш­няя страница Пети Иванова». Выделите текст и отформатируйте его следующий образом:

– выберите шрифт Arial (Формат – Шрифт);

– стиль абзаца – Заголовок 1 (Формат – Абзац);

– размер шрифта – medium (Формат – Размер);

– цвет текста – коричневый (Формат – Цвет текста);

– стиль текста – полужирный (Формат – Стиль текста);

– выравнивание – по центру (Формат – Выравнивание).

– нажмите Enter.

6. В новую строку скопируйте следующий текст (не забудьте применить к вставленному тексту функцию Формат — Убрать все стили текста из главного меню программы):

«Дорогие друзья! Меня зовут Петя Иванов. Я рад приветствовать вас на своей домашней странице. Здесь я расскажу вам о себе, своей семье и друзьях».

7. Выделите этот текст и примените к нему следующие настройки: шрифт – Verdana, размер – Medium, стиль абзаца – Обычный текст, цвет текста – черный, выравнивание – по центру. Результат на рисунке ниже.

Сохранение страницы

8. Создайте папку site.

9. Чтобы сохранить созданную страницу, выберите пункт Файл – Сохранить, выберите папку site и введите имя файла – index.html. Нажмите кнопку Сохранить.

10. Запустите файл index.html двойным щелчком. Результат отображения страницы в браузере на рисунке ниже.

11. Теперь создайте вторую страницу сайта Файл – Создать. Задавать глобальные настройки страницы, создавать заголовок и добавлять текст вы уже умеете. Самостоятельно задайте параметры страницы и создайте заголовок «О себе». Затем скопируйте следу­ющий текст:

«Меня зовут Иванов Петя. Я родился 21 мая 2000 года в городе Перми. В 2009 году пошел в первый класс школы № 59, где и учусь в настоящее время в 7 «б» классе. Мои любимые предметы – математика и история.

Кроме школы увлекаюсь шахматами и плаванием. Люблю читать, гулять с друзьями, смотреть телевизор и играть в компьютерные игры. У меня есть любимая собака Ральф, которой 4 года».

Параметры заголовка аналогичны параметрам заголовка на главной странице сайта. Для текста используйте выравнивание по ширине. Остальные параметры аналогичны параметрам текста главной страницы.

У Вас должен получиться примерно такой результат.

Добавление изображения

12. Скопируйте в папку site изображение petya.jpg.

ВАЖНО! Прежде, чем вставлять изображение, веб-страница должна быть обязательно сохранена!

Для добавления изображения на веб-страницу необходимо:

– убедиться, что веб-страница сохранена;

– установить курсор в место вставки рисунка;

– выбрать пункт Вставка – Изображение;

– с помощью вкладки Адрес задать адрес изображения либо выбрать файл с изображением с помощью кнопки Открыть;

– здесь же ввести текст всплывающей подсказки и альтерна­тивный текст (при необходимости);

– с помощью вкладки Размеры задать размеры рисунка (если необходимо выполнить масштабирование);

– с помощью вкладки Внешний вид задать отступы от изо­бражения до текста по горизонтали и вертикали, а также определить расположение текста по отношению к изобра­жению;

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

13. Сохраните веб-страницу под именем about_me.html. Для этого выполните команду Файл – Сохранить, выберите папку site и введите имя файла. Нажмите кнопку Сохранить.

14. Добавьте изображение, для этого:

– установите курсор в начало первого абзаца текста;

– выберите пункт Вставка – Изображение;

– выберите файл petya.jpg;

– введите всплывающую подсказку – Петя Иванов (альтер­нативный текст вводить не нужно);

– выберите вкладку Размеры, выберите радиокнопку Задать размер, установите флажок Соблюдать пропорции и задайте ширину рисунка – 200;

– выберите вкладку Внешний вид и установите отступы слева и справа – 10, а сверху и снизу – 5;

– установите расположение текста по отношению к рисун­ку – Влево, окружить текстом.

15. Должен по­лучиться такой результат, как на рисунке ниже.

16. Сохраните страницу about_me.html и просмотрите ее в браузере.

Создание таблиц и списков на web-странице

С помощью программы KompoZer добавим к нашему сайту еще две страницы: «Мое расписание уроков» и «Мои учителя». Для создания расписания уроков будем использовать таблицу, а для списка учителей – маркированный список.

Создание таблиц

17. Создайте новую страницу с глобальными настройками, как и у предыдущих страниц. Сохраните ее под именем rasp.html. Вверху страницы создайте заголовок «Мое расписание уроков». Должно получиться вот так.

Для создания простой таблицы необходимо выполнить следу­ющие действия:

– выбрать пункт меню Таблица – Вставить – Таблица;

– выбрать вкладку Точная и задать количество строк и столбцов таблицы, ширину таблицы (либо в % от ширины окна, к либо в пикселях), а также ширину рамки таблицы;

– выбрать вкладку Ячейка и задать тип выравнивая содержи­мого ячейки по горизонтали и вертикали, а также расстоя­ние между ячейками и величину отступа от границы до со­держимого ячейки.

Начнем создавать таблицу «Расписание уроков». В конечном варианте таблица должна будет выглядеть следующим образом:

Обратите внимание, что в таблице есть ячейки, которые раз­биты на две части. В одной ячейке разбиение идет по горизонтали (ИЗО и Музыка) – это означает, что занятия по этому предмету проходят раз в две недели поочередно. В двух ячейках разбиение идет по вертикали (французский и английский языки), что озна­чает деление класса на две группы и их параллельные занятия у разных преподавателей. Кроме того, первая строка и первый столбец таблицы выделены другим цветом.

18. Для начала создайте таблицу с простой структурой без деления ячеек, как уже было описано выше. Размер таблицы – 6 строк на 6 столбцов, Рамка – 1, Выравнивание таблицы – влево, Поля – 2 пикселя, Поля внутри ячейки – 2 пикселя.

19. В результате получим таблицу с примерно одинаковой шири­ной и высотой всех ячеек, выровненную по левой границе окна.

Изменение свойств таблицы

Если возникает необходимость изменить некоторые свойства уже существующей таблицы, то нужно:

– установить курсор в любую ячейку таблицы;

– выбрать пункт меню Таблица – Свойства таблицы;

– изменить нужные свойства всей таблицы (вкладка Таблица) или отдельных ячеек (вкладка Ячейки).

20. Измените способ выравнивания нашей таблицы. Для этого вы­берите указанный выше пункт меню и с помощью вкладки Табли­ца измените тип выравнивания таблицы на значение – по центру.

Выделение ячеек таблицы

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

– выделить с помощью мыши первую ячейку диапазона, а за­тем при нажатой клавише Ctrl щелкать по остальным ячей­кам диапазона;

– выделить с помощью мыши первую ячейку диапазона, а за­тем при нажатой клавише Shift щелкнуть по последней ячейке диапазона (в том случае, если нужно выделить под­ряд идущие ячейки);

– установить курсор в любое место таблицы и щелкнуть по нужной строке или столбцу в линейке настройки таблицы.

Теперь рассмотрим вопрос о разбиении и объединении ячеек. Дело в том, что в HTML-редакторах нет возможности разбиения уже существующей ячейки. Есть только возможность объедине­ния строк и столбцов. Рассмотрим пример. Пусть мы хотим со­здать таблицу с приведенной ниже структурой.

Для этого мы должны создать структуру таблицы из трех (а не из двух) строк, а затем объединить нужные строки в первом и третьем столбцах. Аналогично нужно действовать и при необхо­димости объединения столбцов.

Добавление строк и столбцов

Для добавления строк и столбцов необходимо:

– установить курсор в строку или столбец, куда нужно осу­ществить вставку;

– выбрать пункт меню Таблица – Вставить, а далее один из четырех пунктов: Строку сверху, Строку снизу, Столбец до или Столбец после.

21. Добавьте в нашу таблицу два столбца и одну строку, исполь­зуя приведенный выше алгоритм. Должно получиться 7 строк и 8 столбцов.

Объединение ячеек

Для объединения ячеек надо выполнить следующие действия:

– выделить ячейки;

– выбрать пункт меню Таблица – Объединить выбранные ячейки.

22. Выполните объ­единение ячеек:

– объедините третий и четвертый столбцы во всех строках, кроме четвертой;

– объедините шестой и седьмой столбцы во всех строках, кро­ме третьей;

– объедините строки с номерами 5 и 6 во всех столбцах, кроме четвертого.

Результат на рисунке ниже.

Изменение цвета фона ячеек

Для изменения цвета фона ячеек необходимо:

– выделить ячейки;

– выбрать пункт меню Таблица – Цвет фона ячейки или таблицы;

– выбрать из палитры нужный цвет.

23. Измените в нашей таблице цвет первой строки и первого столбца коричневый цвет.

24. Далее необходимо заполнить таблицу данными (шрифт – Verdana, размер – medium). Для первой строки и первого столбца используйте белый цвет шрифта. Цвет шрифта можно изменить с помощью кнопок на панели форматирования . При наборе текста ширина яче­ек будет изменяться. Не обращайте на это внимание.

25. Сохраните полученную таблицу в файле rasp.html

Изменение ширины столбцов

После набора текста при необходимости можно изменить ши­рину столбцов. Это можно сделать двумя способами:

– использовать специальную шкалу, которая находится под панелью вкладок;

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

Создание списков

Для создания списков необходимо выполнить следующие дей­ствия:

– ввести с клавиатуры элементы списка;

– выделить элементы списка;

– выбрать пункт меню Формат – Список;

– выбрать тип списка – Маркированный или Нумерованный.

Изменение формата списка

Для изменения формата уже существующего списка необходимо:

– выделить элементы списка;

– выбрать пункт меню Формат, Список, Свойства списка.

26. Создайте файл teacher.html с глобальными настройками, как у предыдущих страниц. Вверху на странице напишите заголовок «Мои учителя», отформатируйте аналогично заголовкам на других страницах.

Список учителей будем создавать в виде списка.

27. Скопируйте на страницу следующий текст:

«Орлова Любовь Евгеньевна – русский язык и литература;

Шахова Елена Петровна – алгебра и геометрия;

Любимов Вячеслав Сергеевич – физика и информатика;

Горелова Ирина Федоровна – английский язык;

Филиппова Ольга Александровна – французский язык;

Большаков Андрей Сергеевич – ОБЖ и технология;

Леонова Татьяна Дмитриевна – история и обществознание».

28. Оформите этот текст маркированным списком и расположите по центру страницы, отформатируйте шрифт.

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

Создание текстовых гиперссылок

Для создания текстовой гиперссылки необходимо выполнить следующие действия:

– выбрать пункт Вставка – Ссылка (или нажать кнопку Ссылка на Панели компоновки);

– в первое поле диалогового окна ввести текст гиперссылки;

– во втором поле диалогового окна указать URL-адрес объек­та, на который указывает гиперссылка, или ввести имя файла с указанием пути к нему.

30. Создайте на главной странице нашего сайта четыре гиперссылки. Для этого введите выше заголовка четыре слова через три пробела:

«Главная О себе Мое расписание Мои учителя»

Выделите всю строку, отформатируйте абзац, как обычный текст (не заголовок), шрифтом Verdana, выровняйте по центру страницы.

Результат на рисунке.

31. Далее выделите слово Главная аккуратно, не захватывая пробелы справа.

32. Нажмите кнопку Ссылка и в появившемся окне нажмите кнопку Выбрать файл , найдите файл index.html и два раза щелкните по нему, чтобы имя файла появилось в строке, нажмите ОК.

33. Аналогичным образом выделите фразу О себе.

34. Нажмите кнопку Ссылка и в окне свойств ссылки присвойте ей файл about_me.html.

35. Аналогично создайте еще две гиперссылки:

– Мое расписание (имя файла – rasp.html);

– Мои учителя (имя файла – teacher.html).

36. Сохраните файл.

После выполнения этих действий вы должны увидеть прибли­зительно такой вариант главной страницы, как на рисунке ниже.

37. Теперь выделите всю строку с гиперссылками, скопируйте ее Правка – Копировать. Перейдите в файл О себе, и вставьте скопированную строку выше заголовка страницы Правка – Вставить. Возможно, что у Вас получится вот так, т.е. всем гиперссылкам программа присвоила свойства заголовка.

38. Чтобы это убрать, выделите всю строку со ссылками, и отформатируйте ее как обычный текст Формат – Абзац – Обычный текст и установите строку по центру. Результат будет такой же, как на главной странице сайта.

39. Сохраните файл.

40. Скопируйте строку с гиперссылками на оставшиеся две страницы Мое расписание уроков и Мои учителя, и при необходимости отформатируйте как обычный текст с выравниванием по центру.

41. Не забывайте сохранить файлы, иначе изменения не применятся.

42. Запустите файл index.html в браузере, проверьте работоспособность всех гиперссылок.