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

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

---

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

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

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

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

Рисунок 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

Рисунок 3 

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

Рисунок 4 

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

Рисунок 5 

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

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

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

Рисунок 6 

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

Рисунок 7

 

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

 

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

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

Рисунок 8 

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

Рисунок 9 

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

 

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

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

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

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

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

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

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

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

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

Рисунок 10

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

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

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

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

Рисунок 11

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

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

Рисунок 12

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

Рисунок 13 

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

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

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

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

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

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

Рисунок 14

 

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

 

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

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

Рисунок 15 

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

Рисунок 16 

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

Рисунок 17 

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

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

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

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

Рисунок 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.

Рисунок 19

 

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

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

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

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

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

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

Рисунок 20

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

Рисунок 21 

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

Рисунок 22

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

Рисунок 23

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

Рисунок 24

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

Рисунок 25

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

Рисунок 26

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

Рисунок 27

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

Рисунок 28

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

Рисунок 29

 

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

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

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

Рисунок 30

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

Рисунок 31

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

Рисунок 32

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

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

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

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

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

Рисунок 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>

 

Рисунок 34

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

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

Рисунок 35

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

Рисунок 36

 

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

Рисунок 37

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

Рисунок 38

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

Рисунок 39

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

Рисунок 40

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

Рисунок 41

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

 

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

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

Рисунок 42

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

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

Рисунок 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 обозначено зеленым цветом).

Рисунок 44

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

Рисунок 45

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

 Рисунок 46

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

Рисунок 47

 

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

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

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

Рисунок 48