УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Создание web-сайта в программе Kompozer

Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачайть архив в с программой KompoZer.
Скачать материалы к уроку 1. Создание простой веб-страницы в KompoZer
Скачать материалы к уроку 2. Создание веб-сайта в KompoZer
Скачать материалы к контрольному заданию




Урок 1. Создание простой веб-страницы в KompoZer

Скачать материалы к уроку 

Рассмотрим создание простой веб-страницы в редакторе KompoZer. Веб-страница будет посвящена дисциплине «Web-дизайн», которую изучают студенты профиля «Информационные технологии в медиаиндустрии».

Мы создадим одну веб-страницу с текстами и изображениями (рисунок 1). При щелчке по фото на странице некоторые изображения будут открываться в крупном масштабе, а также разместим видео на веб-странице, которое будет подгружаться с сайта YouTube.

Верстка веб-страницы в Kompozer

Рисунок 1



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

1. Запустите KompoZer.

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

Меню – включает пункты всех операций KompoZer;

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

Панель форматирования – служит для форматирования шрифтов, блоков текста, нумерованных и маркированных списков, выравнивания текста;

Панель вкладок – позволяет одновременно открыть несколько документов, каждая вкладка для одной веб-страницы;

Панель режимов редактирования – предназначена для просмотра страницы в режимах Дизайн, Объединенный и Код;

Рабочее окно – служит для создания собственной веб-страницы;

Менеджер сайта – служит для загрузки страницы на сервер. 

Верстка веб-страницы в Kompozer

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

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

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

К глобальным настройкам страницы относятся:

- цвета фона или фонового рисунка, цвета гиперссылок, цвета основного текста. Для их изменения служит пункт Формат – Цвета и фон страницы;

- радиокнопка Цвета пользователя по умолчанию задает стандартные цвета;

- поле Фоновое изображение предназначено для загрузки картинки для фона веб-страницы.

 

Существует несколько способов выбора цвета (рисунок 3):

- дискретная или непрерывная палитры цветов;

- RGB-модель – смешивание красного, зеленого и синего цветов;

- создание цвета с помощью параметров Оттенок, Насыщенность, Яркость;

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

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

Флажок Прозрачность предназначен для придания цвету прозрачности.

Верстка веб-страницы в Kompozer

Рисунок 3 

1. Установите черный цвет для текста, темно-красный цвет всех гиперссылок и просмотренных гиперссылок (Hex = #990000) и светло-желтый цвет фона (Hex = #FFFFCC) (рисунок 4).

Верстка веб-страницы в Kompozer

Рисунок 4 

Результат установки представлен на рисунке 5.

Верстка веб-страницы в Kompozer

Рисунок 5 

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

2. Выполните команду Формат – Заголовок и свойства страницы.

3. Введите в поле Заголовок текст Дисциплина «Web-дизайн», в поле Описание введите текст Изучение методов создания сайта и с помощью кнопки Выбрать кодировку задайте тип кодировки UTF-8 (рисунок 6). Нажмите ОК.

Верстка веб-страницы в Kompozer

Рисунок 6 

Результат настройки представлен на рисунке 7.

Верстка веб-страницы в Kompozer

Рисунок 7

 

3. Сохранение веб-страницы

 

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

2. Для сохранения страницы выполните команду Файл – Сохранить, выберите папку site и введите имя файла – index.html (рисунок 8). Нажмите кнопку Сохранить.

Верстка веб-страницы в Kompozer

Рисунок 8 

3. Откройте файл index.html в браузере. На экране появится пустая страница с желтым фоном (рисунок 9).

Верстка веб-страницы в Kompozer

Рисунок 9 

4. Для дальнейшей работы понадобятся изображения. Скопируйте файлы и папки из папки web_dop_rgppu в папку site.

 

4. Вставка изображения на веб-страницу

В верхнюю часть веб-страницы вставим фотографию Российского государственного профессионально-педагогического университета.

1. Вы находитесь на вкладке Дисциплина «Web-дизайн» (файл index.html)

2. Добавьте фотографию в верхней части страницы – файл rgppu.jpg.

Для этого выполните следующие действия:

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

- в появившемся окне рядом с полем Адрес изображения нажмите на рисунок открытой папки Верстка веб-страницы в Kompozer и из папки site выберите файл rgppu.jpg;

- введите в поля Всплывающая подсказка и Альтернативный текст фразу Российский государственный профессионально-педагогический университет;

- после этого нажмите ОК (рисунок 10).

Верстка веб-страницы в Kompozer

Рисунок 10

- выделите изображение, щелкнув по нему, и нажмите кнопку Выровнять по центру Верстка веб-страницы в Kompozer, чтобы изображение расположилось по центру страницы;

- сохраните страницу, нажав кнопку Сохранить в левом верхнем углу окна программы Kompozer;

- в браузере обновите страницу index.html.

Результат выполненных действий изображен на рисунке 11.

Верстка веб-страницы в Kompozer

Рисунок 11

3. Измените фон веб-страницы. Сделайте его не однотонным, а с использованием растрового изображения.

Выполните команду Формат – Цвет и фон страницы…  Откроется окно настроек. Рядом с полем Фоновое изображение нажмите кнопку с открытой папкой Верстка веб-страницы в Kompozer и выберите из папки site изображение fon10.jpg (рисунок 12).

Верстка веб-страницы в Kompozer

Рисунок 12

4. Нажмите ОК. Сохраните в KompoZer страницу и обновите ее в браузере. Результат выполненных действий изображен на рисунке 13.

Верстка веб-страницы в Kompozer

Рисунок 13 

5. Введите текст. Для этого установите курсор в нужном месте и начните ввод.

6. Из файла Web-дизайн_ИТМ.doc скопируйте в буфер обмена текст из блока 1.

7. Установите курсор под фотографией университета и вставьте скопированный текст с помощью команды  Правка – Вставить без форматирования (ВАЖНО!!! Использовать команду «Вставить без форматирования». В противном случае на веб-странице будет много ненужного кода, которые скопируется из документа Word).

8. Убедитесь в том, что текст установился по центру. Если этого не произошло, выделите весь текст и нажмите кнопку выравнивания текста по центру Верстка веб-страницы в Kompozer.

9. Сохраните страницу в KompoZer и обновите в браузере.

Результат представлен на рисунке 14.

Верстка веб-страницы в Kompozer

Рисунок 14

 

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

 

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

1. Выделите весь скопированный текст и примените к нему шрифт Tahoma. Выбор шрифта осуществляется в верхнем левом углу окна программы (рисунок 15).

Верстка веб-страницы в Kompozer

Рисунок 15 

Результат выполненных действий представлен на рисунке 16.

Верстка веб-страницы в Kompozer

Рисунок 16 

2. Выделите фразу РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ПРОФЕССИОНАЛЬНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ, отформатируйте ее как Заголовок 1. Для этого после выделения фразы в меню Выбор формата абзаца, в левом верхнем углу окна программы выберите Заголовок 1. Буквы станут крупными (рисунок 17).

Верстка веб-страницы в Kompozer

Рисунок 17 

3. Измените шрифт данного заголовка на Verdana. Для того чтобы изменить шрифт, выделите текст и примените команду Формат – Шрифт – Verdana.

4. Измените цвет текста. Для этого выделите заголовок и выполните команду Формат – Цвет текста… В открывшемся окне выберите темно-красный цвет.

5. Сохраните файл и обновите страницу.

Результат выполненных действий представлен на рисунке 18.

Верстка веб-страницы в Kompozer

Рисунок 18 

6. Работа с текстом в KompoZer очень похожа на работу с текстом в Word. Самостоятельно изучите настройки параметров текста.

7. Фразу Кафедра информационных систем и технологий отформатируйте как Заголовок 2 темно-красного цвета.

Фразу Дисциплина «Web-дизайн» направление подготовки 09.03.02 Информационные системы и технологии Профиль «Информационные технологии в медиаиндустрии отформатируйте как Заголовок 3 темно-красного цвета.

8. Далее из файла Web-дизайн_ИТМ.doc скопируйте в буфер обмена текст из блока 2. Установите курсор под последней фразой и вставьте скопированный текст с помощью команды  Правка – Вставить без форматирования.

9. Выделите весь вновь вставленный текст, выровняйте по ширине и задайте гарнитуру шрифта Tahoma.

10. Выделите полужирным ключевые слова Дисциплина «Web-дизайн», целью изучения дисциплины «Web-дизайн», Задачи изучения дисциплины, должен знать, должен уметь.

11. В блоке задач удалите все дефисы перед каждой задачей вставьте изображение с имитацией пункта списка. Для этого поставьте курсор на начало строки. Выполните команду Вставка – Изображение… Найдите в папке web_dop_rgppu файл spisok_1.gif , в качестве альтернативного текста напишите Список задач и нажмите Вставить. В названии университита после слова «государственный» поставьте курсор и нажмите Enter, чтобы длинный заголовок стал более компактным.

12. Сохраните файл, обновите в браузере. Если абзацы получились «слеплены» друг с другом, добавьте после каждого абзаца пустую строку.

Результат выполненных действий представлен на рисунке 19.

Верстка веб-страницы в Kompozer

Рисунок 19

 

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

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

- выполнить команду Таблица – Вставить – Таблица;

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

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

1. Создайте таблицу с изображениями результатов работ студентов в рамках дисциплины «Web-дизайна» (рисунок 20). Для этого выберите пункт Таблица – Вставить – Таблица.

Верстка веб-страницы в Kompozer

Рисунок 20

2. Выберите вкладку Точная и задайте параметры, аналогичные изображенным на рисунке 21. Нажмите ОК.

Верстка веб-страницы в Kompozer

Рисунок 21 

Слева на странице появится таблица (Рисунок 22).

Верстка веб-страницы в Kompozer

Рисунок 22

3. Для того чтобы выровнять таблицу по центру, необходимо ее сначала выделить. Для этого кликните на таблице. Затем выполните команду Таблица – Свойства таблицы… И в появившемся окне на вкладке Таблица в поле Выравнивание таблицы установите По центру и нажмите ОК (рисунок 23).

Верстка веб-страницы в Kompozer

Рисунок 23

Полученный результат представлен на рисунке 24.

Верстка веб-страницы в Kompozer

Рисунок 24

4. В ячейки таблицы вставьте изображения frame_mini.jpg и blochn_mini.jpg из папки site/images – каждый в отдельную ячейку. Подписи оформите темно-красным цветом, полужирным шрифтом (рисунок 25).

Верстка веб-страницы в Kompozer

Рисунок 25

5. Выделите обе ячейки в третьей строке таблицы (рисунок 26).

Верстка веб-страницы в Kompozer

Рисунок 26

6. Выполните команду Таблица – Объединить выбранные ячейки (рисунок 27).

Верстка веб-страницы в Kompozer

Рисунок 27

7. Аналогичным образом объедините ячейки в последующих трех строках (рисунок 28).

Верстка веб-страницы в Kompozer

Рисунок 28

8. По центру объединенных ячеек вставьте изображения и подписи к ним (рисунок 29).

Верстка веб-страницы в Kompozer

Рисунок 29

 

7. Создание фотогалереи 

1. Каждое маленькое изображение сделайте ссылкой на большое изображение, которое будет открываться в полный большой размер. Для этого выделите первое изображение в таблице, нажмите кнопку Верстка веб-страницы в Kompozer.

2. В появившемся окне нажмите кнопку открытой папки Верстка веб-страницы в Kompozer (рисунок 30).

Верстка веб-страницы в Kompozer

Рисунок 30

3. В окне открытия файла найдите папку site/images, затем в правом нижнем углу выберите пункт Изображения и выберите соответствующее большое изображение (файл, в имени которого есть слово max) (рисунок 31). Нажмите кнопку Открыть.

Верстка веб-страницы в Kompozer

Рисунок 31

4. Имя выбранного файла отобразится в адресе. Установите флажок Показывать рамку вокруг изображения, содержащего ссылку (рисунок 32). Нажмите ОК.

Верстка веб-страницы в Kompozer

Рисунок 32

5. Аналогичным образом создайте гиперссылки для всех изображений в таблице.

6. Сохраните веб-страницу. Обновите в браузере. Кликните на любом изображении, оно отроется в большом формате.

Изображение будет появляться резко, т.к. не подключены скрипты, которые находятся в папке site/js.

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

Чтобы подключить скрипты и стили из папки css, перейдите на вкладку Код внизу окна программы (рисунок 33).

Верстка веб-страницы в Kompozer

Рисунок 33

Скопируйте нижеприведенный код  и вставьте перед конструкцией </head>. Должно получиться, как на рисунке 34.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

 

Верстка веб-страницы в Kompozer

Рисунок 34

Для того чтобы скрипты заработали, в параметры каждого изображения необходимо добавить конструкцию rel="lightbox"

7. Перейдите в режим кода страницы index.html. Для этого в панели режимов редактирования выберите режим Код (рисунок 35).

Верстка веб-страницы в Kompozer

Рисунок 35

8. Найдите в коде конструкцию с названием изображения (рисунок 36).

Верстка веб-страницы в Kompozer

Рисунок 36

 

9. Добавьте rel="lightbox" перед закрывающей угловой скобкой. Должно получиться, как на рисунке 37.

Верстка веб-страницы в Kompozer

Рисунок 37

10. Внесите аналогичные изменения в другие «пути» для всех изображений (рисунок 38).

Верстка веб-страницы в Kompozer

Рисунок 38

11. Сохраните файл, обновите страницу в браузере. Проверьте работоспособность скрипта, кликнув на изображении. Большое изображение должно возникать плавно и постепенно (рисунок 39).

Верстка веб-страницы в Kompozer

Рисунок 39

12. Далее под таблицей с изображениями разместите текст из блока 3 в файле Web-дизайн_ИТМ.doc из папки web_dop_rgppu. Выделите ключевые слова полужирным курсивом (рисунок 40).

Верстка веб-страницы в Kompozer

Рисунок 40

13. Далее создайте таблицу Темы лекций и практических занятий, которая в окончательном варианте будет выглядеть, как на рисунке 41. Содержимое для таблицы возьмите из блока 4 в файле Web-дизайн_ИТМ.doc из папки web_dop_rgppu.

Верстка веб-страницы в Kompozer

Рисунок 41

Обратите внимание, что в таблице есть ячейки, которые объединяют строки, например ячейка со словом Лекции и ячейка со словом Практические занятия.

Рекомендации:

- чтобы задать шрифт Tahoma всем ячейкам таблицы, надо выделить все ячейки и выполнить команду Формат – Шрифт – Tahoma;

- чтобы выровнять текст во всех ячейках по центру, надо выделить все ячейки и нажать кнопку выравнивания по центру Верстка веб-страницы в Kompozer;

- чтобы закрасить фон нескольких ячеек, надо выделить нужные ячейки, выполнить команду Таблица – Цвет фона ячейки или таблицы В появившемся окне выбрать цвет, нажать ОК;

- чтобы изменить цвет текста в нескольких ячейках, надо выделить нужные ячейки и выполнить команду Формат – Цвет текста… В появившемся окне выбрать нужный цвет, нажать ОК.

12. Создайте таблицу в полном соответствии с рисунком 41.

 

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

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

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

- выполнить команду Формат – Список;

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

 

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

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

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

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

 

1. Под таблицей с темами лекций и практических занятий вставьте оставшийся текст из блока 5.

2. Текст из раздела «1. Самостоятельная работа студентов предполагает:» отформатируйте маркированным списком, как на рисунке 42, удалив предварительно все дефисы.

Верстка веб-страницы в Kompozer

Рисунок 42

3. Текст с критериями оценок оформите нумерованным списком согласно рисунку 43.

4. Сохраните страницу, проверьте изменения в браузере.

Верстка веб-страницы в Kompozer

Рисунок 43

 

9. Размещение готовых рекламных баннеров и видео на веб-странице 

Готовые рекламные баннеры в форматах .jpg, .gif, png размещаются на веб-странице так же, как изображения командой Вставка – Изображение

Рассмотрим вставку готового видео на веб-странице.

Мы рассмотрим, как подгрузить на сайт видеофайл с ресурса http://www.youtube.com.

В качестве примера выберем видео под названием «Как создать сайт. Видеоурок по HTML для чайников. УРОК 1».

1. Перед размещением видеоролика на веб-странице, посмотрите его по адресу https://www.youtube.com/watch?time_continue=3&v=I4vDeOUG8co&feature=emb_logo

2. Добавьте видеоролик на веб-страницу. Для этого необходим HTML-код ролика. Для его получения на странице https://www.youtube.com/watch?time_continue=3&v=I4vDeOUG8co&feature=emb_logo кликните на ссылке Поделиться (на рисунке 44 обозначено зеленым цветом).

Верстка веб-страницы в Kompozer

Рисунок 44

3. В появившемся окошке кликните на надписи Встроить (рисунок 45).

Верстка веб-страницы в Kompozer

Рисунок 45

4. В следующем окошке выделите полученный код и нажмите Копировать (рисунок 46).

Верстка веб-страницы в Kompozer

 Рисунок 46

5. Перейдите в режим Код в нашем файле index.html. В самом низу страницы найдите конструкцию </body> и перед ней вставьте полученный код. Должно получиться, как на рисунке 47.

Верстка веб-страницы в Kompozer

Рисунок 47

 

6. Разместите видео по центру страницы.

7. Сохраните файл. Посмотреть встроенное видео в самой программе KompoZer невозможно. Воспроизвести его можно только в браузере.

8. Обновите веб-страницу, включите динамики. Видео загрузится с YouTube, после чего его можно будет посмотреть на созданной веб-странице (рисунок 48).

Верстка веб-страницы в Kompozer

Рисунок 48