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

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

на обложку

Гладкий Алексей Анатольевич

Шрифт:

Листинг 2.4. Вставка изображения

<body>

Этот файл создан для примера.

Если нужно, будет сформирован еще один такой файл.

</body>

Кнопка Вставить пробел предназначена для вставки пробела. Дело в том, что в языке HTML существует следующая особенность: сколько бы раз вы ни нажимали клавишу Пробел, он будет распознавать это как один пробел. Иначе говоря, увеличить расстояние между словами путем многократного нажатия клавиши Пробел у вас не получится: оно все равно будет равняться

одному пробелу. Для решения этой проблемы в языке HTML предназначен специальный инструмент &nbsp: он равняется одному пробелу. В листинге 2.5 приведен фрагмент программного кода, когда между словами файл и создан, а также будет и сформирован вставлены дополнительные пробелы.

Листинг 2.5. Вставка пробелов

<body>

Этот файл  создан для примера.

Если нужно, будет   сформирован еще один такой файл.

</body>

С помощью кнопки Вставить горизонтальную строку можно включить в состав веб-страницы горизонтальную полосу на всю ширину страницы. При нажатии данной кнопки в программный код (а именно – в то его место, где находится курсор) будет добавлен тег <hr>.

Далее расположены две кнопки, с помощью которых в программный код добавляются элементы &lt и &gt. Они предназначены для добавления на веб-страницу символов соответственно < и > (эти символы используются в языке HTML для заключения тегов, а потому сами по себе не распознаются).

Следующие три кнопки предназначены для работы с фреймами. Первая кнопка определяет фреймовую структуру документа, а также размеры фреймов и расположение их на странице. Вторая предназначена для определения фрейма и его свойств внутри frameset-структуры. Третья кнопка предназначена для включения режима, при котором все, что находится между начальным и конечным тэгами данного элемента, будет отображено Интернет-обозревателем, если он не поддерживает фреймы.

Вставка дополнительных эффектов

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

При нажатии на данной вкладке кнопки Вставить бегущую строку в программный код документа добавляются теги <marquee> </marquee>, специально предназначенные для создания эффекта бегущей строки.

Использовать данную кнопку можно двумя способами. Первый заключается в том, чтобы перед ее нажатием выделить слово или текстовый фрагмент, которые должны отображаться в виде бегущей строки. В этом случае сразу после нажатия кнопки этот фрагмент будет заключен между тегами <marquee> </marquee>. Второй способ заключается в том, что перед нажатием кнопки текст не выделяется. В этом случае в программный код будут просто добавлены теги <marquee> </marquee>, а текст бегущей строки нужно будет ввести между ними.

При желании вы можете вставлять в свой веб-документ флеш-объекты. Для этого нужно на вкладке Эффекты нажать кнопку Вставить флеш-объект. После нажатия данной кнопки в программный код веб-страницы будет добавлен код, который в листинге 2.6 находится между уже знакомыми нам фразами.

Листинг 2.6. Вставка флеш-объекта

<body>

Этот файл создан для примера.

</OBJECT>

Если нужно, будет сформирован еще один такой файл.

</body>

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

Вставка таблицы в веб-документ

Многие современные веб-ресурсы используют табличное представление данных. Это удобно, наглядно, эргономично, к тому же позволяет на относительно небольшом пространстве поместить немало информации.

В программе CatsHtml реализована возможность автоматического формирования таблиц. Для этого предназначены инструменты, находящиеся на вкладке Таблица. Содержимое данной вкладки представлено на рис. 3.7.

Рис. 3.7. Инструментарий для формирования таблиц

Как видно на рисунке, данная вкладка содержит четыре кнопки. Рассмотрим назначение каждой из них.

С помощью кнопки Таблица в документ вставляются теги <table> </table>, причем первый из них используется с атрибутом border, имеющим значение 1. Это означает, что создаваемая таблица будет иметь рамку с шириной линий 1 пиксель.

Кнопки Строка и Столбец предназначены соответственно для вставки в документ новых строк и столбцов таблицы. При нажатии кнопки Строка в программный код добавляются теги <tr> </tr>, при нажатии кнопки Столбец – теги <td> </td>. Если перед нажатием любой из этих кнопок выделить текстовый фрагмент, то вставленные теги возьмут этот фрагмент в контейнер. Иначе говоря, если вы выделите в программном коде слова создан для примера, то после нажатия кнопки Строка они будут заключены между тегами – <tr>создан для примера</tr>.

Кнопка Гот. таблица позволяет вставить в документ заготовку готовой таблицы (то есть таблицу, состоящую из одной ячейки). Например, откроем с помощью команды главного меню Файл4Открыть уже знакомый нам тестовый файл Test.html (см. рис. 2.11), выделим в нем слова Эта страница, и нажмем кнопку Гот. таблица. В результате программный код веб-страницы будет выглядеть так, как показано в листинге 2.7.

Листинг 2.7. Вставка заготовки таблицы

<html>

<body>

Эта страница

</td></tr>

</table> открывается по ссылке

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл Сохранить или нажатием комбинации клавиш Ctrl+S, а после этого выполним команду Файл Открыть в броузере. Результат выполненных действий показан на рис. 3.8.