Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
Шрифт:
Интервал:
Закладка:
Следующая кнопка называется Параграф. Она предназначена для разбиения текста на параграфы. При ее нажатии в программный код документа вставляется тег с атрибутом <p class="text"></p>. При необходимости вы можете вручную добавить атрибут align: в зависимости от значения (left, center или right) он позволяет выровнять параграф соответствующим образом по горизонтали.
Далее следует кнопка, которая называется Перенос строки. Уже судя по отображаемым на ней символам (BR) нетрудно догадаться, что она предназначена для перевода текста на следующую строку, то есть для создания абзаца. При ее нажатии в программный код (а именно – в то его место, где в данный момент находится курсор) будет вставлен тег <br> (фрагмент такого кода показан в листинге 2.2).
Листинг 2.2. Перевод текста на следующую строку
<body>
Этот файл создан для примера.<br>Если нужно, будет сформирован еще один такой файл.
</body>
В данном примере вторая фраза будет начата с новой строки.
Следующие четыре кнопки предназначены для создания неупорядоченных, нумерованных и маркированных списков. При их нажатии в программный код добавляются соответствующие теги (например, при создании неупорядоченного списка – теги <ul> и </ul>, и т.д.).
ПРИМЕЧАНИЕ
С помощью соответствующих кнопок вы можете формировать маркированные списки как с квадратными, так и с круглыми маркерами.
Далее следует шесть кнопок, которые перечислены ниже (напомним, что их названия отображаются в виде всплывающих подсказок при подведении указателя мыши).
• Мелкий шрифт – при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице уменьшенным шрифтом относительно расположенного рядом текста.
• Крупный шрифт – при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице укрупненным шрифтом относительно расположенного рядом текста.
• Нижний индекс и Верхний индекс – эти кнопки предназначены для сдвига выделенного слова или текстового фрагмента соответственно вниз или вверх относительно расположенного рядом текста (иначе говоря, включается нижний или верхний индекс).
• Форматированный текст – данную кнопку удобно использовать для вставки в программный код веб-страницы уже отформатированного текста. У этого текста будут сохранены все пробелы и переносы.
• Текст фиксированной ширины – при нажатии данной кнопки выделенный текст будет отображаться в окне Интернет-обозревателя моноширинным шрифтом.
Последний параметр на данной вкладке предназначен для формирования заголовков. Как мы уже отмечали ранее, в языке HTML возможно использование заголовков шести уровней. Поэтому вначале нужно выделить слово или словосочетание, которое будет являться заголовком, затем из раскрывающегося списка выбрать требуемый уровень заголовка и нажать кнопку Заголовок (на ней отображается символ Н).
Вставка специальных элементов
Возможности программы предусматривают вставку в контент веб-страницы специальных элементов – гиперссылок, изображений, фреймов и т. д. Необходимый для этого инструмент находится на вкладке Специальные, содержимое которой показано на рис. 3.6.
Рис. 3.6. Вкладка Специальные
Ранее мы уже говорили о том, что одним из главных элементов любой веб-страницы является гиперссылка. В программе CatsHtml процесс создания гиперссылок автоматизирован: для этого нужно воспользоваться кнопкой Вставить ссылку, которая является на вкладке Специальные крайней слева.
Чтобы вставить гиперссылку, нужно выделить слово или текстовый фрагмент, который будет являться ссылкой, и нажать кнопку Вставить ссылку. В листинге 2.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово сформирован.
Листинг 2.3. Вставка гиперссылки
<body>
Этот файл создан для примера. Если нужно, будет <a href="http://">сформирован</a> еще один такой файл.
</body>
В сформированном коде остается лишь ввести вручную адрес гиперссылки, являющийся значением атрибута href.
Чтобы вставить в документ изображение, нужно нажать на вкладке Специальные кнопку Вставить картинку, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки на экране отображается окно, в котором нужно указать путь к файлу изображения. В листинге 2.4 показан фрагмент кода со вставкой изображения из файла Образец.html.
Листинг 2.4. Вставка изображения
<body>
Этот файл создан для примера.
<img src="/picture/Образец.jpg">
Если нужно, будет сформирован еще один такой файл.
</body>
Кнопка Вставить пробел предназначена для вставки пробела. Дело в том, что в языке HTML существует следующая особенность: сколько бы раз вы ни нажимали клавишу Пробел, он будет распознавать это как один пробел. Иначе говоря, увеличить расстояние между словами путем многократного нажатия клавиши Пробел у вас не получится: оно все равно будет равняться одному пробелу. Для решения этой проблемы в языке HTML предназначен специальный инструмент  : он равняется одному пробелу. В листинге 2.5 приведен фрагмент программного кода, когда между словами файл и создан, а также будет и сформирован вставлены дополнительные пробелы.
Листинг 2.5. Вставка пробелов
<body>
Этот файл создан для примера.
Если нужно, будет сформирован еще один такой файл.
</body>
С помощью кнопки Вставить горизонтальную строку можно включить в состав веб-страницы горизонтальную полосу на всю ширину страницы. При нажатии данной кнопки в программный код (а именно – в то его место, где находится курсор) будет добавлен тег <hr>.
Далее расположены две кнопки, с помощью которых в программный код добавляются элементы < и >. Они предназначены для добавления на веб-страницу символов соответственно < и > (эти символы используются в языке HTML для заключения тегов, а потому сами по себе не распознаются).
Следующие три кнопки предназначены для работы с фреймами. Первая кнопка определяет фреймовую структуру документа, а также размеры фреймов и расположение их на странице. Вторая предназначена для определения фрейма и его свойств внутри frameset-структуры. Третья кнопка предназначена для включения режима, при котором все, что находится между начальным и конечным тэгами данного элемента, будет отображено Интернет-обозревателем, если он не поддерживает фреймы.
Вставка дополнительных эффектов
На вкладке Эффекты содержатся кнопки, с помощью которых вы можете вставлять в веб-документ дополнительные эффекты. Одним из самых популярных таких эффектов является бегущая строка.
При нажатии на данной вкладке кнопки Вставить бегущую строку в программный код документа добавляются теги <marquee> </marquee>, специально предназначенные для создания эффекта бегущей строки.
Использовать данную кнопку можно двумя способами. Первый заключается в том, чтобы перед ее нажатием выделить слово или текстовый фрагмент, которые должны отображаться в виде бегущей строки. В этом случае сразу после нажатия кнопки этот фрагмент будет заключен между тегами <marquee> </marquee>. Второй способ заключается в том, что перед нажатием кнопки текст не выделяется. В этом случае в программный код будут просто добавлены теги <marquee> </marquee>, а текст бегущей строки нужно будет ввести между ними.
При желании вы можете вставлять в свой веб-документ флеш-объекты. Для этого нужно на вкладке Эффекты нажать кнопку Вставить флеш-объект. После нажатия данной кнопки в программный код веб-страницы будет добавлен код, который в листинге 2.6 находится между уже знакомыми нам фразами.
Листинг 2.6. Вставка флеш-объекта
<body>
Этот файл создан для примера.
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="" HEIGHT="" CODEBASE="http://active.macromedia.com/flash6/cabsswflash.cab#version=6,0,0,0">
