Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
В верхней части данного окна демонстрируется образец того, как будет выглядеть список при установленных в данный момент настройках.
Чтобы добавить в список новый пункт, нужно в инструментальной панели, которая расположена вертикально вдоль правого края окна, нажать кнопку Добавить пункт (названия кнопок данной инструментальной панели отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При этом центральная часть вкладки примет вид, как показано на рис. 5.27.
Рис. 5.27.
Здесь в соответствующих полях нужно ввести текст и значение пункта, после чего нажать кнопку ОК. Если вы хотите, чтобы на веб-странице данный пункт в списке был выбран по умолчанию – установите флажок Выбран по умолчанию.
Чтобы отредактировать какой-либо пункт, нужно выделить его в списке (см. рис. 5.26) щелчком мыши и нажать в инструментальной панели кнопку Редактировать пункт. При этом откроется интерфейс ввода и редактирования пункта (см. рис. 5.27), в котором выполняются необходимые действия.
Чтобы удалить пункт из списка, нужно выделить его щелчком мыши и нажать в инструментальной панели кнопку Удалить пункт. При этом следует соблюдать осторожность, поскольку программа не выдает дополнительный запрос на подтверждение операции удаления.
Далее мы на конкретном примере рассмотрим процесс формирования маркированного списка. Мы его вставим между двумя последними фразами веб-страницы, с которой мы уже работали ранее (см. рис. 5.17). Перед этим немного дополним исходный код: первую фразу оформим в виде заголовка, а после второй фразы вставим разрыв (листинг 4.8).
Листинг 4.8. Исходный код страницы перед вставкой маркированного списка
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
Полученные знания применим на практике.
</body>
</html>
Нажимаем кнопку Инструмент создания списков, и в открывшемся окне настраиваем параметры маркированного списка так, как это показано на рис. 5.28.
Рис. 5.28. Пример настройки маркированного списка
После нажатия в данном окне кнопки ОК исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 4.9.
Листинг 4.9. Исходный код веб-страницы после создания маркированного списка
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<ul type="circle">
<li>Пункт первый</li>
<li>Пункт
<li>Пункт третий</li>
<li>Пункт четвертый</li>
</ul>
Полученные знания применим на практике.
</body>
</html>
Теперь сохраним выполненные изменения с помощью команды главного меню Файл Сохранить или нажатием комбинации клавиш Ctrl+S, после чего нажмем клавишу F10. чтобы просмотреть веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 5.29.
Рис. 5.29. Маркированный список
Теперь удалим из исходного кода нашей веб-страницы фрагмент, который формирует маркированный список (код должен выглядеть, как в листинге 4.8), и создадим нумерованный список. Нажимаем кнопку Инструмент создания списков, и в открывшемся окне настраиваем параметры списка так, как показано на рис. 5.30.
Рис. 5.30. Пример настройки нумерованного списка
Обратите внимание – в данном примере мы создаем нумерованный список, в котором для нумерации используются римские цифры. После нажатия в данном окне кнопки ОК исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 4.10.
Листинг 4.10. Исходный код веб-страницы после создания нумерованного списка
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<ol type="I">
<li>Пункт первый</li>
<li>Пункт второй</li>
<li>Пункт третий</li>
<li>Пункт четвертый</li>
</ol>
Полученные знания применим на практике.
</body>
</html>
После сохранения выполненных изменений и открытия страницы в окне Интернет-обозревателя она будет выглядеть так, как показано на рис. 5.31.
Рис. 5.31. Нумерованный список
Аналогичным образом осуществляется формирование выпадающих и многострочных списков.
Формирование гиперссылок
Поскольку без гиперссылок не обходится ни одна веб-страница, в программе NeonHtml реализована возможность автоматической вставки гиперссылок. Для решения данной задачи необходимо перейти на вкладку Ссылка, содержимое которой показано на рис. 5.32.