Таблица. Содержимое данной вкладки представлено на рис. 3.7.
Рис. 3.7. Инструментарий для формирования таблиц
Как видно на рисунке, данная вкладка содержит четыре кнопки. Рассмотрим назначение каждой из них.
С помощью кнопки Таблица в документ вставляются теги
Кнопки Строка и Столбец предназначены соответственно для вставки в документ новых строк и столбцов таблицы. При нажатии кнопки Строка в программный код добавляются теги
Кнопка Гот. таблица позволяет вставить в документ заготовку готовой таблицы (то есть таблицу, состоящую из одной ячейки). Например, откроем с помощью команды главного меню Файл4Открыть уже знакомый нам тестовый файл Test.html (см. рис. 2.11), выделим в нем слова Эта страница, и нажмем кнопку Гот. таблица. В результате программный код веб-страницы будет выглядеть так, как показано в листинге 2.7.
Листинг 2.7. Вставка заготовки таблицы
Эта страница |
Теперь сохраним выполненные изменения с помощью команды главного меню Файл ► Сохранить или нажатием комбинации клавиш Ctrl+S, а после этого выполним команду Файл ► Открыть в броузере. Результат выполненных действий показан на рис. 3.8.
Рис. 3.8. Таблица из одной ячейки
Как видно на рисунке, предварительно выделенный в программном коде текст помещен в таблицу, состоящую из одной ячейки.
Добавление форм ввода данных
На многих веб-страницах используются разнообразные формы ввода данных. С их помощью, в частности, происходит авторизация посетителей веб-ресурса, выбор товаров в Интернет-магазине, отбор какой-то информации в соответствии с заданными условиями, и т. д. Возможности программы CatsHtml предусматривают создание форм ввода данных с использованием разных элементов (поля текстового ввода, переключатели, кнопка отправки и очистки всех параметров формы, т др.).
Для работы с формами в программе предусмотрены инструменты, расположенные на вкладке Формы. Содержимое данной вкладки представлено на рис. 3.9.
Рис. 3.9. Вкладка Формы
На данной вкладке первой слева кнопкой является кнопка Формы. Если намереваетесь использовать форму, то использование этой кнопки обязательно: при ее нажатии в программный код веб-страницы будет вставлен код, включающий в себя начальный и конечный теги формы.
Учтите, что все элементы формы должны находиться внутри элемента FORM, вставляемого с помощью кнопки Формы. Иначе говоря, если вы без предварительной вставки элемента FORM нажмете кнопку Поле ввода, Стереть, Отправить или какую-то другую кнопку, предназначенную для вставки элемента формы – это не будет иметь никакого смысла: элемент не отобразится на странице и, соответственно, работать не будет.
В листинге 2.8 показан фрагмент программного кода, при котором на странице создана форма, содержащая поле текстового ввода данных и переключатель (эта форма расположена после текстовой части контента).
Листинг 2.8. Добавление формы и ее элементов
Этот файл создан для примера. Если нужно, будет сформирован еще один такой файл.
Возможности программы предусматривают вставку с помощью соответствующих кнопок следующих элементов формы:
• поле ввода данных;
• поле ввода нескольких строк;
• переключатель;
• поле ввода пароля;
• кнопка для очистки всех параметров формы от присвоенных им значений;
• кнопка для отправки введенных в параметры формы данных;
• поле для выбора значения из раскрывающегося списка.
Отметим, что фрагменты кода, добавляемые при нажатии соответствующих кнопок, вы можете редактировать вручную по своему усмотрению (более того – это почти всегда необходимо, чтобы, например, ввести доступные для выбора варианты возможных значений, и др.).
Цветовое оформление веб-страницы
Цветовое оформление играет одну из ключевых ролей в эргономике страницы. В программе CatsHtml реализована возможность тонкой настройки цвета шрифта и фонового оформления веб-документа. Необходимые действия выполняются на вкладке Цвета, которая содержит две кнопки: Цвет шрифта и Фоновый цвет.
Как нетрудно догадаться, первая из этих кнопок предназначена для выбора цвета шрифта, а вторая – для выбора цвета фона. В любом случае после выполнения настроек в программный код веб-страницы автоматически добавляются соответствующие элементы.
Настройка цветового оформления и для шрифта, и для фона осуществляется одинаково. При нажатии любой из кнопок на экране отображается окно, изображенное на рис. 3.10.
Рис. 3.10. Настройка цветового оформления
Данное окно состоит из двух частей: вверху осуществляется выбор цвета из предложенного стандартного набора, а внизу можно выбрать тему оформления.
ПРИМЕЧАНИЕ
Управление отображением нижней части окна осуществляется с помощью кнопки Темы. Отметим, что по умолчанию нижняя часть окна не отображается.
Чтобы выбрать цвет, достаточно в верхней части окна щелкнуть мышью на соответствующем значке. Если в предложенном стандартном наборе вам не удалось найти подходящий цвет – нажмите кнопку Выбрать, и в открывшейся палитре цветов самостоятельно выполните настройку цвета.
Что касается выбора темы оформления, то вначале нужно в левой части окна щелчком мыши выбрать название темы, а после этого в правой части указать стиль цветового оформления.
Работа с буфером обмена
Опытные программисты знают, насколько велико бывает значение буфера обмена при написании программных кодов. Область веб-разработки не является исключением из этого правила, поэтому разработчики программы CatsHtml предусмотрели гибкий механизм для использования буфера обмена. Для этого в программе предназначена вкладка Буфер обмена, содержимое которой показано на рис. 3.11.
Рис. 3.11. Вкладка Буфер обмена
Возможности программы предусматривают использование до девяти буферов обмена. Это очень удобно, когда, например, необходимо сразу запомнить для последующего использования несколько блоков разнородной информации. В таком случае одну информацию вы копируете в буфер обмена № 1, другую – в буфер обмена № 2, и т. д. А когда нужно ее куда-то вставить, вы выбираете тот буфер обмена, в котором находится необходимая именно сейчас информация.
Чтобы скопировать данные в буфер обмена, нажмите кнопку копировать в буфер №, предварительно выбрав из расположенного справа от нее раскрывающегося списка номер буфера обмена. Этот номер следует запомнить – иначе потом придется перебирать все буферы в поисках требуемой информации.
Чтобы вставить информацию из буфера обмена, нужно выбрать номер этого буфера из раскрывающегося списка и нажать расположенную слева кнопку вставить из буфера №.
Автоматизация некоторых действий с помощью Мастеров
Как мы уже могли убедиться, процесс создания веб-страниц в программе CatsHtml довольно прост: нужно лишь грамотно пользоваться соответствующими инструментами, и при необходимости вручную вносить требуемые корректировки в программный код веб-страницы (для этого, кстати, и пригодятся знания, полученные нами в главе 2 «Основы веб-программирования с помощью языка HTML»).
Однако кроме, этого в программе CatsHtml имеется несколько Мастеров, позволяющих еще более упростить выполнение ряда действий – таких, как вставка изображений, вставка гиперссылок и т. д. Доступ к Мастерам осуществляется с помощью соответствующих команд меню Инструменты. Далее мы рассмотрим некоторые из них.
Мастер вставки картинки
Для добавления на веб-страницу графических изображений полезно использовать специальный механизм, вызываемый с помощью команды главного меню Инструменты ► Мастер вставки картинки. При активизации данной команды на экране отображается окно, которое показано на рис. 3.12.
Рис. 3.12. Мастер вставки графических изображений
Слева вверху данного окна находится переключатель Виды вставок, с помощью которого следует указать, каким образом должно быть вставлено выбранное изображение – как отдельный объект или в качестве фонового изображения (значения соответственно Вставить как объект и Вставить как фон).
После этого нужно указать путь к файлу изображения. Вначале из раскрывающегося списка выбирается диск, на котором находится этот файл, а затем правее указывается конкретный каталог. Содержимое каталога отображается слева (под полем, в котором указан диск), и для выбора требуемого файла нужно выделить его щелчком мыши.
Справа вверху окна демонстрируется изображение, на котором в списке установлен курсор. Таким образом, щелкая мышью на всех файлах выбранного каталога, вы можете просмотреть каждое изображение и выбрать наиболее подходящее из них.
Если переключатель Виды вставок установлен в положение Вставить как объект, то становятся доступными для редактирования параметры, находящиеся в области Дополнительные настройки (Необязательные). Здесь вы можете указать толщину рамки изображения, ввести краткое описание изображения, а также указать его ширину и высоту.
В нижней части окна с помощью переключателя Указывать путь нужно определить, какой путь должен быть указан – Относительный или Абсолютный. О том, что такое относительный и абсолютный путь, мы говорили ранее – в разделе «Форматирование текста, создание таблиц и вставка изображений».
Чтобы вставить изображение в документ в соответствии с установленными настройками, нажмите в окне Мастера кнопку Вставить. Кнопка Отмена предназначена для выхода из данного режима без вставки графического объекта в документ.
Мастер свойств веб-страницы
В программе реализована возможность определения основных свойств веб-страницы с помощью соответствующего Мастера, вызываемого с помощью команды главного меню Инструменты ► Мастер свойств странички. При активизации данной команды на экране открывается окно, которое показано на рис. 3.13.
Рис. 3.13. Мастер свойств веб-страницы
Смысл данного Мастера состоит в том, чтобы максимально быстро задать основные свойства страницы: фоновый рисунок, цвет шрифта и фонового оформления, заголовок страницы, цвета ссылок (причем отдельно можно указать цвет активной и помещенной ссылки), и т. д.
Например, чтобы озаглавить веб-страницу, вам не нужно вручную набирать теги
Чтобы использовать какое-то изображение в качестве фонового оформления, установите флажок Фон странички и нажмите распложенную справа кнопку Выбрать. В результате на экране откроется окно, в котором нужно будет по обычным правилам Windows-приложений указать путь к требуемому файлу. Учтите, что программа поддерживает работу с графическими объектами, сохраненными только в файлах форматов bmp, gif и jpg.
Что касается выбора цветов для элементов веб-страницы (ссылок, шрифта и др.), то для этого нужно установить соответствующий флажок, затем нажать расположенную справа кнопку Выбрать и в открывшейся палитре цветов выбрать подходящий цвет.
После нажатия в данном окне кнопки Вставить в программный код веб-страницы будут автоматически внесены соответствующие изменения. С помощью кнопки Отмена осуществляется выход из данного режима без сохранения и применения выполненных изменений.
Мастер создания гиперссылок
О важности такого элемента, как гиперссылка, мы уже неоднократно говорили ранее. Также мы уже знаем, как в программе CatsHtml осуществляется вставка гиперссылок с помощью соответствующей кнопки на вкладке Специальные (см. рис. 3.6). Однако в программе реализована возможность вставки гиперссылки и другим методом – с помощью соответствующего Мастера, доступ к которому осуществляется с помощью команды главного меню Инструменты ► Мастер создания ссылки.
При активизации данной команды на экране отображается окно, изображенное на рис. 3.14.
Рис. 3.14. Мастер создания ссылок
Возможности программы предусматривают создание трех типов гиперссылок:
• на файл, находящийся на диске;
• на страницу в Интернете;
• на электронный ящик.
В зависимости от того, какую ссылку вы хотите вставить на веб-страницу, установите переключатель Виды ссылок в соответствующее положение.
После этого в области Свойства следует указать свойства создаваемой гиперссылки. В поле Ссылка нужно указать адрес гиперссылки. Если вы хотите сослаться на файл, который находится на жестком диске, то нажмите кнопку Выбрать и в открывшемся окне укажите путь к этому файлу. Этот путь полностью отобразится в поле Ссылка.
Если переключатель Виды ссылок установлен в положение Ссылка на страничку в инете или Ссылка на электронный ящик, то кнопка Выбрать становится недоступной. В этом случае адрес гиперссылки нужно ввести с клавиатуры или вставить из буфера обмена в поле Ссылка.
После этого в поле Текст ссылки нужно ввести текст, который на текущей странице будет преобразован в гиперссылку. Иначе говоря, при щелчке мышью на данном тексте будет открываться гиперссылка.
Вы можете сделать так, что гиперссылка будет открываться либо в текущем окне Интернет-обозревателя, либо в новом окне, которое отобразится автоматически. Для этого нужно установить переключатель При нажатии на ссылку документ откроется в положение соответственно В этом же окне или В новом окне. Отметим, что данный переключатель доступен только в том случае, когда переключатель Виды ссылок установлен в положение Ссылка на страничку на диске или Ссылка на страничку в инете (очевидно, что для ссылок на электронный адрес параметр При нажатии на ссылку документ откроется неактуален).
Завершается процесс создания гиперссылки с помощью Мастера нажатием в данном окне кнопки Вставить. После этого соответствующий код будет добавлен в то место программного кода, где находится курсор. С помощью кнопки Отмена осуществляется выход из данного режима без сохранения выполненных изменений.
Мастер создания опроса
Как мы уже отмечали ранее, на многих современных сайтах можно увидеть опросы для посетителей, посвященные самым разным темам. Одного интересует мнение посетителей о работе сайта, другой желает получить отзывы о работе своей компании, третий проводит опрос по какой-то общественно значимой теме, и т. д.
В программе CatsHtml предусмотрен механизм – Мастер создания опроса, с помощью которого вы можете быстро создать опрос в автоматическом режиме. Вам не придется писать сложный программный код – CatsHtml все сделает сама, вам нужно будет лишь указать основные параметры опроса. В результате на вашем сайте будет создана готовая к использованию форма опроса.
Чтобы приступить к созданию опроса, выполните команду главного меню Инструменты ► Мастер создания опроса. При активизации данной команды на экране откроется окно, изображенное на рис. 3.15.
Рис. 3.15. Мастер создания опроса
Возможности программы предусматривают создание опросов в двух вариантах: понравился ли посетителю сайт и его мнение по какому-либо поводу. Выбор варианта осуществляется нажатием соответствующей кнопки, расположенной слева вверху окна. Рассмотрим оба варианта.
Чтобы узнать, насколько понравился посетителю ваш сайт, нажмите слева вверху окна кнопку Вам понравился сайт?. При этом содержимое окна будет выглядеть так, как показано на рис. 3.15, а справа вверху демонстрируется образец того, как будет выглядеть опрос.
Вначале в поле Куда отправлять результаты нужно ввести электронный адрес, на который вам автоматически будут отправляться результаты опроса. После этого в поле Тема письма (которое к вам придет) можно с клавиатуры ввести тему письма с результатами опроса, которая будет формироваться автоматически при отправке вам письма. Это удобно для безошибочной идентификации письма с результатами опроса, что особенно актуально при получении больших объемов электронной корреспонденции.
После этого в соответствующих полях с клавиатуры нужно ввести название опроса (то есть вопрос, на который будут отвечать посетители), а также варианты ответов. Возможности программы предусматривают ввод до пяти вариантов ответов, но вы можете ограничиться и меньшим количеством. В этом случае просто не заполняйте лишние поля.
При желании вы можете оформить опрос в виде таблицы – для этого достаточно установить флажок Оформление в виде таблицы.
Для отправки ответа на вопрос посетитель должен будет нажать на кнопку, название которой вы можете указать в поле Название кнопки «отправить».
Завершается создание опроса нажатием в данном окне кнопки Вставить. Соответствующий код будет добавлен в то место программного кода, где находится курсор. Чтобы отказаться от вставки опроса, нажмите в данном окне кнопку Отмена.
Чтобы создать другой вариант опроса, нажмите слева вверху окна кнопку Ваше мнение по поводу. В этом случае окно Мастера примет вид, как показано на рис. 3.16.
Рис. 3.16. Мастер создания опроса (разновидность)
В данном случае вы также можете заранее увидеть, как будет выглядеть созданный опрос – его образец демонстрируется в правом верхнем углу окна.
Как и при первом варианте опроса, вначале в поле Куда отправлять результаты нужно ввести электронный адрес, на который вам автоматически будут отправляться результаты опроса. После этого в поле Тема письма (которое к вам придет) можно с клавиатуры ввести тему письма с результатами опроса, которая будет формироваться автоматически при отправке вам письма. Это позволит вам безошибочно выделить письмо с результатами опроса среди всей прочей электронной корреспонденции.
Далее в соответствующих полях следует ввести название опроса (то есть тема, мнением о которой будут делиться с вами посетители сайта), указать максимально допустимое количество символов в одной строке, а также максимальное количество строк (это позволит ограничить объем отсылаемых текстовых сообщений).
В поле Метод переноса строк вы можете указать, каким образом должен выполняться перенос строк в поле текстового сообщения. Возможен выбор одного из перечисленных ниже вариантов.
• Перенос слов не происходит – в данном случае строки переноситься не будут, и весь вводимый текст будет отображаться в одной строке.
• Перенос отображается, но в письме его не будет – при выборе данного значения строки в поле ввода текстового сообщения будут переноситься по мере его заполнения посетителем сайта, но в полученном вами письме перенос осуществляться не будет.
• Перенос происходит – при установленном данном значении строки будут переноситься и в текстовом поле формы опроса при заполнении его посетителем сайта, и в полученном вами письме.
В поле Отправитель вы можете ввести название поля, в котором посетитель сайта будет оставлять информацию о себе. В поле Длина можно указать максимальную длину значения данного поля (по умолчанию предлагается ограничить его 20 символами).
Если вы не желаете вставлять в форму поле Отправитель, снимите флажок Пункт «Отправитель». То же самое касается и кнопки Очистить, которая в форме опроса предназначена для быстрой очистки всех его параметров: если вы не хотите вставлять эту кнопку в форму опроса, снимите флажок Кнопка «Очистить». По умолчанию оба эти флажка установлены.
При желании вы можете оформить опрос в виде таблицы – для этого достаточно установить флажок Оформление в виде таблицы.
Для отправки ответа на вопрос посетитель должен будет нажать на кнопку, название которой вы можете указать в поле Название кнопки «отправить». Аналогичным образом в соответствующем поле можно ввести произвольное название кнопки Очистить.
Завершается создание опроса нажатием в данном окне кнопки Вставить. Соответствующий код будет добавлен в то место программного кода, где находится курсор. Чтобы отказаться от вставки опроса, нажмите в данном окне кнопку Отмена.
Мастер создания таблиц
О том, что для создания таблиц предназначены специальные теги, которые могут использоваться совместно с соответствующими атрибутами, мы уже знаем. Также знаем и о том, что в программе CatsHtml на вкладке Таблицы имеются инструменты, позволяющие автоматизировать процесс создания таблиц. Но кроме этого создавать таблицы вы можете с помощью специально предназначенного Мастера, доступ к которому осуществляется с помощью команды главного меню Инструменты ► Мастер создания таблиц.
При активизации данной команды на экране отображается окно Мастера, изображенное на рис. 3.17.
Рис. 3.17. Мастер создания таблиц
Отметим, что процесс создания таблицы с помощью данного мастера предельно прост: для этого достаточно лишь указать основные ее параметры.
В полях Количество строк и Количество колонок с клавиатуры вводится соответственно число строк и столбцов таблицы. После этого с помощью параметра Выравнивание задается выравнивание таблицы на странице. Требуемый вариант выбирается из раскрывающегося списка; возможен выбор одного из трех значений – center (данный способ выравнивания предлагается использовать по умолчанию), left или right. Как нетрудно догадаться, в первом случае таблица будет выровнена по центру, во втором – по левому краю, а в третьем – по правому краю.
В поле Толщина рамки указывается толщина рамки в пикселях, а в расположенных ниже полях – высота и длина таблицы.
Завершается процесс создания таблицы нажатием в данном окне кнопки Вставить. Кнопка Отмена предназначена для выхода из данного режима без сохранения выполненных изменений.