Электронное приложение

Технология создания web - сайтов

HTML

 

Раздел 3. Использование программных средств для создание web – сайтов.

 
  Оглавление
§ 15. Обзор программных средств для создание web – сайтов.
§ 16. Основы работы в программе Kompozer.
§ 17. Создание страницы в веб-редакторе Kompozer.
§ 18. Индивидуальный проект.
Литература.

 

 

§ 17. Создание страницы в веб-редакторе Kompozer.

 

Задание №1. Создание простой начальной страницы сайта

1.                Запустим программу с помощью Главного меню системы или ярлыка на Рабочем столе.

2.      Новая страница открывается автоматически, и её следует сохранить. При этом в диалоговом окне нужно набрать имя начальной страницы сайта index (это универсальное правило для любого сайта):

3. Нажатие на кнопку ОК приведёт к диалоговому окну, запрашивающему имя папки для сохранения. Её можно создать прямо сейчас (или заблаговременно) с помощью соответствующей кнопки диалогового окна. Имя папки - Экзюпери. Стандартный тип файла html для страницы сайта задаётся автоматически.

4. Наберём в первых строках страницы следующий текст:

Антуан Мари Жан-Батист Роже де Сент-Экзюпери

Antoine Marie Jean-Baptiste Roger de Saint-Exupйry

(1900 - 1944)

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

5.    Вставка изображения. Все картинки (элементы оформления), размещаемые на страницах сайта, должны находиться в его структуре в отдельной папке (или папках). Поэтому обратимся к Менеджеру сайта, располагающемуся в левой части окна программы, и нажмём его кнопку Редактировать сайты.

6.       Выберем папку Экзюпери, созданную в п. 3, и нажмём кнопку ОК.

234

7. Убедимся в появлении имени папки в поле иерархической схемы сайта и выберем её. Затем нажмём кнопку Новая папка Менеджера сайта и зададим имя pict. Важно запомнить: все имена папок и файлов в структуре сайта определяются строчными буквами латинского алфавита.

8.             . Раскроем структуру сайта, нажав на + слева от имени, и убедимся в появлении папки pict.

9.              Для помещения в папку pict учебных файлов pict.jpg, prince1.jpg, prince2.jpg, prince3.jpg свернём окно Kompozer и воспользуемся любыми доступными для этого средствами. Затем вернёмся в окно программы и нажмём кнопку Обновить Менеджера сайта. Убедимся в появлении в схеме сайта файлов изображений.

10.      Установим теперь текстовый курсор в конце текста на странице и нажмём клавишу Enter, определив место для вставки. С помощью приёма перетаскивания курсором «мыши» разместим файл из схемы сайта pict.jpg в заданном месте. Убедимся в появлении изображения на странице. Это самый простой и удобный способ вставки картинки. Однако если воспользоваться пунктами меню Вставка/Изображение... мы получаем возможность использовать важные настройки добавление всплывающей подсказки, альтернативного текста, гиперссылки, изменение размеров, положения на странице для выбранного изображения.

90

11.  Вызовем для изображения на странице встроенное (контекстное) меню и выберем пункт Свойства изображения... В диалоговом окне выберем вкладку Внешний вид и установим текстовый курсор в поле ввода Сплошная рамка:. Введём значение 1 и нажмём ОК. Убедимся в появлении заданного элемента оформления для изображения.

12.  Следующий шаг вставка гиперссылки. Для этого опять придётся «отложить в сторону» окно программы и воспользоваться Интернет-обозревателем (браузером). С помощью любого поисковика получим результат запроса на слово Экзюпери и откроем соответствующий ресурс Википедии.

13.      Скопируем адрес ресурса в оперативную память (буфер обмена) и вернёмся в окно Kompozer. На следующей строке после изображения, сохраняя размещение по центру, наберём текст Страница Википедии. Выберем его и вызовем во встроенном меню пункт Создать ссылку...

14.  В окне диалога вставим адрес из памяти в соответствующем поле. Установим флажок Открытие ссылок и положение списка выбора в новом окне. Нажмём ОК и убедимся в появлении гиперссылки.

15.         Самостоятельно определим и добавим ещё 2-4 ссылки на ресурсы по теме сайта. Затем на новой строке вставим разделяющую черту с помощью пунктов меню Вставка/Разделитель.

16.  Сохраним текущее состояние страницы.

17.      Пропустим пару строк и перейдём на третью, расположив текстовый курсор по левому краю. Три раза нажмём кнопку Панели форматирования Увеличить отступ (сдвиг вправо).

18.  Наберём следующее:

Ночной полёт (1931)

Планета людей (1938)

Маленький принц (1943)

19. Следующий шаг фон страницы и установка цветов. Выполним пункты меню Формат/Цвета и фон страницы...

67

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 год.  При использовании материалов обязательна ссылка на владельца