§ 17.
Создание страницы в веб-редакторе Kompozer.
Задание №1.
Создание простой начальной страницы сайта
1.
Запустим
программу
с
помощью
Главного
меню
системы
или
ярлыка
на
Рабочем
столе.
2.
Новая
страница
открывается
автоматически,
и
её
следует
сохранить.
При
этом
в
диалоговом
окне
нужно
набрать
имя
начальной
страницы
сайта
index
(это
универсальное
правило
для
любого
сайта):

3. Нажатие
на
кнопку
ОК
приведёт
к
диалоговому
окну,
запрашивающему
имя
папки
для
сохранения.
Её
можно
создать
прямо
сейчас
(или
заблаговременно)
с
помощью
соответствующей
кнопки
диалогового
окна.
Имя
папки
-
Экзюпери.
Стандартный
тип
файла
html
для
страницы
сайта
задаётся
автоматически.
4. Наберём
в
первых
строках
страницы
следующий
текст:
Антуан
Мари
Жан-Батист
Роже
де
Сент-Экзюпери
Antoine Marie Jean-Baptiste Roger de Saint-Exupйry
(1900 - 1944)
Разместим
текст
по
центру
и
применим
к
нему
инструменты
форматирования
по
своему
усмотрению
(вид
шрифта,
размер,
начертание
и
цвет
символов).
Обратили
внимание
на
пунктирную
красную
рамку?
Она
обозначает
блок
единого
форматирования
и
никак
не ограничивает
свободы
внесения
изменений.
5.
Вставка
изображения.
Все
картинки (элементы
оформления),
размещаемые
на
страницах
сайта,
должны находиться
в
его
структуре
в
отдельной
папке
(или
папках).
Поэтому
обратимся
к
Менеджеру
сайта,
располагающемуся
в
левой
части
окна
программы,
и
нажмём
его
кнопку
Редактировать
сайты.
6.
Выберем
папку
Экзюпери,
созданную
в
п. 3,
и
нажмём
кнопку
ОК.

7.
Убедимся
в
появлении
имени
папки
в
поле
иерархической
схемы
сайта
и
выберем
её.
Затем
нажмём
кнопку
Новая
папка
Менеджера
сайта
и
зададим
имя
pict.
Важно
запомнить:
все
имена
папок
и
файлов
в
структуре
сайта
определяются
строчными
буквами латинского
алфавита.
8.
. Раскроем
структуру
сайта,
нажав
на +
слева
от
имени,
и
убедимся
в
появлении
папки
pict.
9.
Для
помещения
в
папку
pict
учебных
файлов
pict.jpg,
prince1.jpg,
prince2.jpg,
prince3.jpg
свернём
окно
Kompozer
и
воспользуемся
любыми
доступными
для
этого
средствами.
Затем
вернёмся
в
окно
программы
и
нажмём
кнопку
Обновить
Менеджера
сайта.
Убедимся
в
появлении
в
схеме
сайта
файлов
изображений.
10.
Установим
теперь
текстовый
курсор
в
конце
текста
на
странице
и
нажмём
клавишу
Enter,
определив
место
для
вставки.
С
помощью
приёма
перетаскивания
курсором
«мыши»
разместим
файл
из
схемы
сайта
pict.jpg
в
заданном
месте.
Убедимся
в
появлении изображения
на
странице.
Это
самый
простой
и
удобный
способ
вставки
картинки.
Однако
если
воспользоваться
пунктами
меню Вставка/Изображение...
мы
получаем
возможность
использовать
важные
настройки
—
добавление
всплывающей
подсказки,
альтернативного
текста,
гиперссылки,
изменение
размеров,
положения
на
странице
для
выбранного
изображения.

11.
Вызовем
для
изображения
на
странице
встроенное
(контекстное)
меню
и
выберем
пункт
Свойства
изображения...
В
диалоговом
окне
выберем
вкладку
Внешний
вид
и
установим
текстовый
курсор
в
поле
ввода
Сплошная
рамка:.
Введём
значение 1
и
нажмём
ОК.
Убедимся
в
появлении
заданного
элемента
оформления
для
изображения.
12.
Следующий
шаг
—
вставка
гиперссылки.
Для
этого
опять
придётся
«отложить
в
сторону»
окно
программы
и
воспользоваться Интернет-обозревателем
(браузером).
С
помощью
любого
поисковика
получим
результат
запроса
на
слово
Экзюпери
и
откроем
соответствующий
ресурс
Википедии.
13.
Скопируем
адрес
ресурса
в
оперативную
память (буфер
обмена)
и
вернёмся
в
окно
Kompozer.
На
следующей
строке
после изображения,
сохраняя
размещение
по
центру,
наберём
текст
Страница
Википедии.
Выберем
его
и
вызовем
во
встроенном
меню
пункт
Создать
ссылку...
14.
В
окне
диалога
вставим
адрес
из
памяти
в
соответствующем
поле.
Установим
флажок
Открытие
ссылок
и
положение
списка
выбора
в
новом
окне.
Нажмём
ОК
и
убедимся
в
появлении
гиперссылки.
15.
Самостоятельно
определим
и
добавим
ещё 2-4
ссылки
на
ресурсы
по
теме
сайта.
Затем
на
новой
строке
вставим
разделяющую
черту с
помощью
пунктов
меню
Вставка/Разделитель.
16.
Сохраним
текущее
состояние
страницы.
17.
Пропустим
пару
строк
и
перейдём
на
третью,
расположив
текстовый
курсор
по
левому
краю.
Три
раза
нажмём
кнопку
Панели
форматирования
Увеличить
отступ (сдвиг
вправо).
18.
Наберём
следующее:
Ночной
полёт (1931)
Планета
людей (1938)
Маленький
принц
(1943)
19.
Следующий
шаг
—
фон
страницы
и
установка
цветов.
Выполним
пункты
меню
Формат/Цвета и фон страницы...

20.
В
диалоговом
окне
установим
переключатель
в
положение
Использовать
цвета:.
Обратим
внимание,
что
можно
изменить стандартное
цветовое
оформление
шрифтов
по
своему
усмотрению,
но
выберем
только
кнопку
Фон:.
Зададим
цвет
страницы,
руководствуясь
при
этом
правилами
дизайна
и
здравым
смыслом.
Также
заметим,
что
можно
использовать
внешнее
изображение
в
качестве
фона.
Нажмём
ОК.
Задание №2.
Создание
страницы
с
табличным
размещением
информации
1.
Запустим
программу
с
помощью
Главного
меню
системы
или
ярлыка
на
Рабочем
столе.
В
Менеджере
сайта
развернем
папку
Экзюпери.
2.
Новую
страницу
сохраним
(создадим)
с
именем
princ
в
папке
Экзюпери.
В
Менеджере
сайта
нажмём
кнопку
Обновить
и
убедимся
в
появлении
новой
страницы
в
структуре сайта.
3.
Теперь
воспользуемся
Интернет-обозревателем
и
поисковой
системой
для
получения текста
сказки "Маленький
принц".
Для
удаления
форматирования
источника
разместим
текст
предварительно
в
документе
простого
текстового
редактора,
а
затем
перенесём его
на
страницу
сайта.
Обращаем
внимание,
что
вставка
из
оперативной
памяти
(буфера
обмена)
через
пункт
встроенного
(контекстного)
меню
не
работает;
пользуемся
сочетанием
клавиш
CTRL
+ C
и
CTRL
+
V
или
меню
окна.
Выполним
форматирование
текста
по
своему
усмотрению,
не
забыв
указать
источник.
Результат
(верхняя
часть
страницы)
может
выглядеть,
например,
так:

При
этом
для
форматирования
посвящения
использовались
кнопки
Панели
инструментов
Увеличить
отступ
и
Выровнять
по
ширине,
Выровнять
по
центру.
5.
Разместим
на
следующей
строке
от
заголовка
изображение
prince1.jpg
из
папки
pict.
6.
Перейдём
собственно
к
тексту
сказки
и
установим
текстовый
курсор
в
начале
абзаца.
Нажмём
клавишу
Enter
для
освобождения
строки
и
кнопку
Таблица
в
Панели инструментов.
7.
Перейдём
в
окне
Вставка
таблицы
на
вкладку
Точная
и
зададим
параметры
как
показано
на
рисунке:
Перейдём
в
правую
ячейку
таблицы
и
выберем
во
встроенном
меню
для
неё
пункт
Свойства
ячейки
таблицы...
9.
В
окне
диалога
Свойства
таблицы
на
вкладке
Ячейки
установим:
размер
по
ширине
-30%
от
размера
таблицы;
выравнивание
содержимого -
горизонтальное
по
центру.
На
вкладке
Таблица
установим
выравнивание
таблицы
по
центру.
Оставив
остальные
параметры
неизменными,
нажмём
ОК.
10.
Разместим
в
правой
ячейке
таблицы
изображение
prince2.jpg.
11.
Перейдём
в
левую
ячейку
таблицы
и
установим
таким
же
образом
размер
по
ширине -70%
от
размера
таблицы.
Разместим
первые
три
абзаца
текста
в
этой
ячейке.
Вот
что
примерно
у
нас
должно
получиться:

12.
Вернём
обычный
режим
для
страницы.
Разместим
самостоятельно
следующие
2-3
абзаца
текста
и
изображение
prince3.jpg
также
в
таблице,
но
поменяем
их
местами
по отношению
к
первой
таблице.
Не
забываем
выполнять
текущее
сохранение
и
просмотр
страницы.
14.
Вызовем
в
меню
окна
программы
пункты
Формат/Заголовок и свойства страницы...
В диалоговом
окне
наберём
заголовок
"Маленький
принц".
Он
будет
показываться
Интернет-обозревателем
в
заголовке
окна
при
просмотре.
Заполним
авторское
поле
своей
фамилией.
Затем
нажмём
ОК.
15.
Самостоятельно
-
создать
страницу
для
размещения
"Ночного
полета"
или
"Планеты
людей".
Для
этого
можно
использовать
страницу "Маленького
принца"
как
шаблон.
16.
Запустим
программу
с
помощью
Главного
меню
системы
или
ярлыка
на
Рабочем
столе.
В
Менеджере
сайта
развернем
папку
Экзюпери
и
откроем
страницу
index.html.
17.
В
начале
каждой
строки
перечня
произведений
разместим
из
папки
pict
изображение
кнопки
button1.png
и
отделим
его
от
текста
пробелом.

18.
Выберем
текст
Маленький
принц
и
нажмём
кнопку
Ссылка
в
Панели
инструментов.
В
окне
диалога
установим
путь
к
файлу
prince.html
и
нажмём
ОК.
Убедимся
в
том,
что текст
принял
вид
гиперссылки.
19
.
Выберем
теперь
картинку
слева
от
текста
и
нажмём
опять
кнопку
Ссылка
в
Панели
инструментов.
В
окне
диалога
на
вкладке
Ссылка
также
установим
путь
к
файлу
prince.html.
При
этом
должен
быть
установлен
флажок
Относительный
URL.
20.
.
Перейдём
на
вкладку
Адрес
и
наберём
в
поле
Всплывающая
подсказка:
текст
"Маленький
принц".
Переключатель
установим
в
положение
Не
использовать
альтернативный
текст
и
нажмём
ОК.

21.
Сохраним
текущее
состояние
страницы
и
проверим
работоспособность
ссылок
в
Интернет-обозревателе
с
помощью
кнопки
Просмотр
в
Панели
инструментов.
22
Аналогично
установим
ссылки
на
другое
произведение
Экзюпери,
размещённое
самостоятельно
на
отдельной
странице
в
предыдущем
занятии.
23.
Откроем
страницу
сайта
prince.html.
Выберем
обозначение
первой
главы
I
и
нажмём кнопку
Якорь
в
Панели
инструментов.
24.
В
окне
диалога
оставим
имя
I
(его,
конечно,
можно
изменить)
и
нажмём
ОК.
Убедимся
в
появлении
характерного
обозначения
якоря (закладки)
на
странице.
25.
.
Проделаем
те
же
действия
для
главы II (и
по
желанию -
далее).
26.
Теперь
перейдём
в
начало
страницы
и
под
картинкой
наберём
ряд
римских
чисел (формат
текста
на
выбор):
27.
Выберем
первое
число
I
и
нажмём
кнопку
Ссылка
в
Панели
инструментов.
28.
В
окне
диалога
зададим
соответствующий
якорь
и
другие
настройки
как
на
рисунке.
Нажмём
ОК
и
убедимся
в
появлении
текстовой
гиперссылки.
Зададим
ещё
1-2
ссылки
на
якоря (закладки).
29.
Нажав
кнопку
Просмотр
в
Панели
инструментов,
убедимся
в
работоспособности
локальных
ссылок
на
странице.
30.
Выполним
текущее
сохранение
страниц
учебного
сайта.
31.
Теперь
освободим
первую
строку
на
странице
и
по
центру
разместим
изображение
home.png
из
папки
pict.
32.
Определим
это
изображение
как
гиперссылку
на
страницу
сайта
index.html
со
всплывающей
подсказкой
Начальная
страница.
33.
Скопируем
это
изображение-ссылку
на
однотипные
страницы.
Таким
образом
будем
считать,
что
страницы
учебного
сайта
взаимосвязаны.
©
Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год. При использовании материалов обязательна ссылка на владельца
|