Создание "Домашней страницы" в редакторе 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 .

• Просмотр кода
• Чтобы просмотреть или внести изменения в НТМL-код доку­мента, необходимо в панели режимов редактирования выбрать ре­жим Код . Выберите данный режим и посмотрите полученный ре­зультат.

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

• Для добавления изображения необходимо :
• • установить курсор в место вставки рисунка;
• • выбрать пункт Вставка ---- Изображение;
• • с помощью вкладки Адрес задать адрес изображения либо выбрать файл с изображением с помощью кнопки Открыть ;
• • здесь же ввести текст всплывающей подсказки и альтернативный текст (при необходимости);
• • с помощью вкладки Размеры задать размеры рисунка (если необходимо выполнить масштабирование);
• • с помощью вкладки Внешний в ид задать отступы от изображения до текста по горизонтали и вертикали, а также определить расположение текста по отношению к изобра­жению ;
• • если рисунок должен выполнять роль гиперссылки , то с помощью вкладки Ссылка задать адрес документа, на кото­рый будет осуществляться переход .

• Добавьте к нашей странице изображение:
• • установите курсор в начало первого абзаца текста;
• • выберите пункт Вставка � Изображение ;
• • выберите файл boy.jpg;
• • введите всплывающую подсказку - «Петя Иванов » (альтер­нативный текст вводить не нужно) ;
• • выберите вклад ку Размеры, установите флажок Соблюдать пропорции и задайте ширину рисунка - 13 04;
• • выбери те вкладку Внешний вид и установите отступы слева и справа - 5, а сверху и снизу - 2;
• • установите расположение текста по отношению к рисунку - Влево, окружить текстом .

Просмотр результата

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

• Спасибо за внимание!