Что включают в себя глобальные настройки документа

§ 14. Создание сайта «Домашняя страница»

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

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

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

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

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

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

Выберем для нашего сайта черный цвет текста, коричневый цвет всех гиперссылок (Нех = #993300) и светло-желтый цвет фона (Нех = #FFFFCC).

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

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

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

Для ввода текста достаточно просто установить курсор в рабочее окно и начать ввод. Предварительно с помощью Панели форматирования или через пункт меню Формат можно задать тип, размер и цвет шрифта, начертание, тип выравнивания текста и т. д. Работа с текстом в программе KompoZer очень напоминает работу в текстовом процессоре Word, поэтому предлагаем вам самостоятельно разобраться с настройками параметров текста.

После задания настроек введите нужный текст.

Помимо заголовка, добавим на страницу следующий текст:

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

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

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

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

Рис. 2.12. Главная страница сайта «Домашняя страница Пети Иванова»

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

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

Просмотр кода

Чтобы просмотреть или внести изменения в HTML-код документа, необходимо в панели режимов редактирования выбрать режим Код. Выберите данный режим и посмотрите полученный результат.

Теперь создадим вторую страницу сайта (рис. 2.13). Задавать глобальные настройки страницы, создавать заголовок и добавлять текст вы уже умеете.

Рис. 2.13. Вторая страница сайта «Домашняя страница Пети Иванова»

Попробуйте самостоятельно задать параметры страницы и создать заголовок «О себе». Затем наберите следующий текст:

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

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

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

Теперь добавим к тексту изображение.

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

Далее сохраните файл под именем about_me.html. Должен получиться такой результат, как на рис. 2.13.

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

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

Система основных понятий

Вопросы и задания

Мою маму зовут Елена Евгеньевна. Ей 35 лет. Она окончила медицинский институт и работает врачом-педиатром в детской районной поликлинике. Моя мама очень добрая и веселая.

Моего папу зовут Алексей Юрьевич. Ему 38 лет. У него два высших образования (строительный и экономический факультеты) и в настоящее время он занимается собственным бизнесом в области строительства. Папа у меня строгий, но справедливый.:-)

У меня много друзей, но самые большие мои друзья — Иванов Кирилл и Орлов Сергей. У нас с ними общие увлечения, поэтому мы много времени проводим вместе. Кирилл старше нас с Сергеем на год и учится в восьмом классе. Мы вместе с ним занимаемся плаванием. Сергей — мой одноклассник, и мы часто с ним вместе делаем уроки, играем в шахматы и гуляем во дворе.

Проверьте в браузере работоспособность всего сайта и всех гиперссылок.

Источник

Содержание урока

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

Создание сайта «Домашняя страница» (§ 14)

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

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

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

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

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

Выберем для нашего сайта черный цвет текста, коричневый цвет всех гиперссылок (Hex = #993300) и светло-желтый цвет фона (Hex = #FFFFCC).

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

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

Следующая страница Работа с текстом

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы рассмотрим, как подгрузить на сайт видеофайл с ресурса 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 обозначено зеленым цветом).

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

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

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

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

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

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

Источник