Или Как просмотреть исходный код страницы 18 страница
Теперь сохраним выполненные изменения с помощью команды главного меню Файл > Сохранить или нажатием комбинации клавиш 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.
Рис. 5.32. Вкладка Ссылка
Отметим, что в программе предусмотрен очень удобный меха- низм, который позволяет формировать гиперссылки даже совсем не- опытным веб-разработчикам. Рассмотрим, как пользоваться этим механизмом, на конкретном примере.
Вначале нужно выделить в исходном коде слово или текстовый фрагмент, который будет являться гиперссылкой. Предположим, что в нашем примере это будет слово знания из последней фразы со- зданной нами веб-страницы (см. листинг 4.8). Выделим его и нажмем кнопку Ссылка (она на данной вкладке является первой слева, ее название отображается в виде всплывающей подсказки). В результа- те на экране откроется окно, изображенное на рис. 5.33.
|
|
|
 |
Рис. 5.33. Формирование гиперссылки
Как видно на рисунке, данное окно состоит из двух вкладок: Па- раметры и Стиль. На вкладке Параметры осуществляется собствен- но формирования гиперссылки, а на вкладке Стиль можно настроить ее оформление.
Первое, что нужно сделать — это выбрать из раскрывающегося списка протокол гиперссылки. Например, если вы хотите сделать ссылку на другой веб-ресурс — выберите в этом списке значение http:// или https://, если нужно сделать ссылку на электронный ад- рес — выбирайте значение mailto:, а если нужно сослаться на файл, находящийся в компьютере — укажите значение На диске и т. д. По- сле этого в расположенном справа поле нужно ввести конкретный адрес, куда будет вести гиперссылка. Если это находящийся на диске файл — то для заполнения данного поля нужно нажать расположен- ную справа от него кнопку, и в открывшемся окне по обычным пра- вилам Windows указать путь к требуемому файлу. В остальных слу- чаях адрес гиперссылки вводится с клавиатуры.
В поле Надпись отображается текст гиперссылки. Это поле запол- няется автоматически — в нем отображается выделенный в исход- ном коде текст, который должен являться гиперссылкой (напомним, что в нашем примере это слово знания). При необходимости этот текст вы можете отредактировать по своему усмотрению.
|
|
|
Гиперссылка на веб-странице может открываться как в текущем окне Интернет-обозревателя, так и в новом его окне. Требуемый ва- риант выбирается из раскрывающегося списка в поле Где открыть.
В случае надобности можно снабдить гиперссылку всплывающей подсказкой, которая будет отображаться на экране при подведении к ней указателя мыши. Это особенно полезно, когда недостаточно оче- видно, куда именно ведет данная гиперссылка. Текст всплывающей подсказки вводится с клавиатуры в поле Всплывающая подсказка.
При желании можно обособить гиперссылку в тексте, то есть сде- лать так, что она от соседних слов будет находиться на большем рас- стоянии, чем все остальные слова текстового контента — по отноше- нию друг к другу. Соответствующие настройки задаются с помощью параметров Отступ слева и Отступ справа: здесь указывается рас- стояние, на котором должна находиться гиперссылка от соседних слов. Причем это расстояние можно измерять по-разному — в пиксе- лях, сантиметрах, миллиметрах и др. (требуемый вариант выбирает- ся из соответствующего раскрывающегося списка).
|
|
|
Как мы уже отмечали ранее, на вкладке Стиль можно настроить стиль отображения гиперссылки. В частности, вы можете создать и использовать CSS-класс, либо выполнить настройку параметров шрифта так, как было рассказано выше (см. рис. 5.19–5.22).
Завершается процесс создания гиперссылки нажатием в данном окне кнопки ОК. Если создать гиперссылку в соответствии с парамет- рами, представленными на рис. 5.33, то исходный код веб-страницы будет выглядеть так, как показано в листинге 4.11 (напомним, что гиперссылкой в нашем примере является слово знания).
Листинг 4.11. Вставка гиперссылки
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br> Полученные <a href="http://www.yandex.ru" target="_blank"
style="margin-left:5px;margin-right:15px;" title="ссылка на яндекс">знания
</a>применим на практике.
</body>
</html>
Теперь сохраним выполненные изменения и просмотрим веб- страницу в окне интернет-обозревателя. Если все сделано правильно, то страница будет выглядеть так, как показано на рис. 5.34.
 |
Рис. 5.34. Обособленная гиперссылка
Обратите внимание: гиперссылка выглядит обособленной, по- скольку расстояние от нее до соседних слов больше, чем между осталь- ными словами текста. Если щелкнуть мышью на данной ссылке, то в отдельном окне откроется главная страница портала www.yandex.ru.
Формирование и вставка таблиц в веб-документ
Формирование таблиц и их вставка в веб-документ в программе NeonHtml может осуществляться двумя способами: путем поочередно- го добавления тегов с помощью соответствующих кнопок, либо с по- мощью специального механизма, позволяющего практически полно- стью автоматизировать процесс построения таблицы. В любом случае, все действия по формированию и вставке таблиц осуществляются на вкладке Таблица, содержимое которой показано на рис. 5.35.
 |
Рис. 5.35. Вкладка Таблица
На данной вкладке имеется пять инструментов (кнопок). Назна- чение четырех из них очевидно — на них изображены названия те- гов. При нажатии любой из этих кнопок соответствующая пара тегов (один открывающий, а другой — закрывающий) будет вставлена в исходный код текущей веб-страницы.
А вот самая первая кнопка позволяет почти моментально сфор- мировать таблицу, причем попутно можно задать и объединение не- которых ячеек этой таблицы (при наличии такой необходимости). Эта кнопка называется Таблица, при ее нажатии на экране отобража- ется окно, которое показано на рис. 5.36.
 |
Рис. 5.36. Построение таблицы в автоматическом режиме
В данном режиме выполняются все действия, необходимые для быстрого построения таблицы в автоматическом режиме.
Процесс предельно прост: чтобы указать основные параметры таблицы (количество строк и столбцов), вам достаточно мышью обо- значить таблицу в левой части данного окна. Это делается так: вы направляете указатель мыши в квадратик, соответствующий нижней правой ячейке таблицы, и щелкаете на нем мышью. В результате на схеме прототип вашей таблицы будет выделен (см. рис. 5.36).
Если нужно, вы можете выполнить объединение некоторых ячеек таблицы. Для этого поочередно щелкните мышью на начальной и конечной ячейках объединяемого диапазона. На схеме объединенная ячейка будет выделена другим цветом.
В правой части окна выполняется настройка остальных параметров таблицы. С помощью флажка Центрировать таблицу вы можете вклю- чить режим центрирования таблицы. Если установлен флажок Номера ячеек в комментариях, то в исходный код веб-страницы (а именно — в ту его часть, которая формирует таблицу) будут добавлены коммента- рии для каждой ячейки, в которых будет указан ее номер.
cellpadding — в данном поле указывается размер полос чистого пространства, отделяющего содержимое ячеек таблицы от ее границ (иначе говоря, с помощью этого атрибута определяется расстояние от содержимого ячейки до ее границ);
cellspacing — в данном поле указывается расстояние между ячей- ками таблицы.
Завершается процесс первоначального формирования таблицы нажатием в данном окне кнопки ОК. Если мы вставим таблицу, настройки которой показаны на рис. 5.36, между двумя последними фразами веб-страницы, с которой мы уже работали ранее (см. рис. 5.17), то исходный код этой страницы будет выглядеть так, как показано в листинге 4.12.
Листинг 4.12. Предварительная настройка таблицы
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<table cellspacing="3" cellpadding="3">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Полученные знания применим на практике.
</body>
</html>
Как видно в данном листинге, код таблицы требует доработки. Несмотря на то, что реализованный в программе механизм автома- тического формирования таблицы очень удобен и прост, в нем есть один недостаток: не предусмотрено создание табличных рамок. По- этому если вы хотите, чтобы содержимое таблицы не просто было представлено в столбцах и строках, но и была изображена сама таб- лица — нужно добавить соответствующей тег.
Как мы уже знаем, рамки таблицы задаются с помощью тега border. Следовательно, доработаем код нашей таблицы так, как пока- зано в листинге 4.13.
Листинг 4.13. Начальный фрагмент табличного кода с до- бавленным тегом border
<table cellspacing="3" cellpadding="3" border="2">
В результате внесенных изменений наша таблица будет иметь рамку толщиной 2 пикселя.
Теперь нам нужно заполнить ячейки таблицы содержимым. Наша таблица содержит три строки и четыре столбца, соответственно — двенадцать ячеек. В эти ячейки мы внесем названия месяцев года. В результате исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 4.14.
Листинг 4.14. Вставка таблицы на страницу
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<table cellspacing="3" cellpadding="3" border="2">
<tr>
<td>
Январь
</td>
<td>
Февраль
</td>
<td>
Март
</td>
<td>
Апрель
</td>
</tr>
<tr>
Май
<td>
</td>
<td>
Июнь
</td>
<td>
Июль
</td>
<td>
Август
</td>
</tr>
<tr>
<td>
Сентябрь
</td>
<td>
Октябрь
</td>
<td>
Ноябрь
</td>
<td>
Декабрь
</td>
</tr>
</table>
олученные знания применим на практике.
</body>
</html>
Теперь сохраним выполненные изменения и посмотрим, как вы- глядит страница в окне Интернет-обозревателя (рис. 5.37).
Рис. 5.37. Веб-страница с таблицей
Как видно на рисунке, мы получили таблицу из трех строк и че- тырех столбцов, обрамленную рамкой.
Создание форм и инструментов для ввода и отправки данных
С помощью программы NeonHtml вы можете создавать формы для отправки данных, и включать в них переключатели, флажки, кнопки и иные инструменты. Необходимые для этого действия вы- полняются на вкладке Форма, содержимое которой представлено на рис. 5.38.
 |
Рис. 5.38. Вкладка Форма
Для примера создадим небольшую форму, которая будет вклю- чать в себя текстовое поле, поле выбора файла, флажок, а также кнопки отправки данных и очистки формы.
Напомним, что в первую очередь необходимо создать саму фор- му — в противном случае добавление флажков, кнопок и иных ин- струментов не будет иметь никакого смысла. Вставлять форму мы будем между двумя последними фразами веб-страницы, с которой работали и в предыдущих разделах. Чтобы добавить форму, нажмем на вкладке Форма кнопку с таким же названием (она является первой слева) — в результате на экране отобразится окно создания формы, изображенное на рис. 5.39.
 |
Рис. 5.39. Создание формы
В данном окне в поле Адрес отправления данных необходимо ука- зать, по какому адресу будут отправляться данные после заполнения всех параметров формы и нажатия в ней кнопки Отправить (или другой кнопки, предназначенной для отправки данных). Чтобы за- полнить данное поле, нужно нажать расположенную справа от него кнопку и в открывшемся окне указать требуемый путь.
В поле Имя формы можно с клавиатуры ввести произвольное имя формы. Если внизу окна установить флажок Поддерживать отправ- ление файлов, то в форме будет реализован механизм, позволяющий отправлять файлы.
Завершается процесс создания формы нажатием в данном окне кнопки ОК. В листинге 4.15 показан программный код веб-страницы после вставки в него формы в соответствии с настройками, представ- ленными на рис. 5.39.
Листинг 4.15. Вставка формы в веб-документ
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<form action="пример1.html" method="post" enctype="multipart/form- data" name="Obrazec">
</form>
Полученные знания применим на практике.
</body>
Дата добавления: 2021-01-21; просмотров: 106; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!