Категории
Меню
Лучшие книги » Компьютеры и Интернет » Интернет » Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий

Читать онлайн Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 32 33 34 35 36 37 38 39 40 ... 50
Перейти на страницу:

Завершается процесс создания гиперссылки нажатием в данном окне кнопки ОК. Если создать гиперссылку в соответствии с параметрами, представленными на рис. 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. Создание формы

В данном окне в поле Адрес отправления данных необходимо указать, по какому адресу будут отправляться данные после заполнения всех параметров формы и нажатия в ней кнопки Отправить (или другой кнопки, предназначенной для отправки данных). Чтобы заполнить данное поле, нужно нажать расположенную справа от него кнопку и в открывшемся окне указать требуемый путь.

1 ... 32 33 34 35 36 37 38 39 40 ... 50
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов
27.12.2023 - 21:25
Профессиональный поиск в Интернете - Алексей Кутовенко Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Профессиональный поиск в Интернете - Алексей Кутовенко
18.04.2024 - 01:01
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2025. Все права защищены.


Почта для связи: [email protected]