Текст книги "Веб-Самоделкин. Как самому создать сайт быстро и профессионально"
Автор книги: Алексей Гладкий
Жанры:
Программирование
,сообщить о нарушении
Текущая страница: 6 (всего у книги 17 страниц) [доступный отрывок для чтения: 7 страниц]
Описание пользовательского интерфейса
После установки программы на компьютер в меню Пускбудет сформирована ее программная папка, включающая в себя две команды: для запуска CatsHtml и для ее деинсталляции. Кроме этого, на рабочем столе появится ярлык запуска программы.
После запуска CatsHtml на экране отображается ее пользовательский интерфейс, который показан на рис. 3.1.
Рис. 3.1. Интерфейс программы CatsHtml
В верхней части окна программы находится ее главное меню, предназначенное для выбора режима работы и активизации соответствующих функций.
Сразу под главным меню расположена инструментальная панель, некоторые кнопки которой дублируют соответствующие команды главного меню. Названия кнопок инструментальной панели отображается в виде всплывающих подсказок при подведении к ним указателя мыши.
Самую большую часть интерфейса занимает рабочая область, в которой, собственно, и ведется вся работа по созданию и редактированию веб-страниц. На рис. 3.1 в рабочей области показана предварительная разметка документа, которая формируется автоматически при создании нового веб-документа, а также при запуске программы. Здесь можно увидеть уже знакомые нам теги: ,
Нажатием правой кнопки мыши в любом месте рабочей области вызывается контекстное меню, команды которого предназначены для работы с буфером обмена, выделения данных, а также отмены и возврата последних действий.
Внизу окна находится панель, в которой отображается текущее цветовое оформление элементов программного кода (комментарий, ссылка, и др.). Чтобы изменить это оформление, нужно щелкнуть мышью на соответствующем значке данной панели – в результате на экране отобразится окно настройки, описание которого будет приведено ниже.
Под инструментальной панелью находится семь вкладок: Общие(данная вкладка открыта на рис. 3.1), Специальные, Эффекты, Таблицы, Формы, Цветаи Буфер обмена. Каждая из этих вкладок содержит набор инструментов, предназначенных для выполнения соответствующих операций и процедур. Более подробно порядок работы на каждой вкладке мы будем рассматривать ниже, по мере знакомства с программой.
Настройка параметров программы
Перед тем как приступить к эксплуатации программы, рекомендуется просмотреть и, при необходимости – отредактировать параметры ее настройки. Отметим, что предложенные по умолчанию параметры являются оптимальными для большинства пользователей, однако иногда все же приходится внести в настройки программы некоторые корректировки.
Как мы уже отмечали ранее, для перехода в режим настройки программы нужно в нижней части интерфейса щелкнуть мышью на любом значке ( Комментарий, Картинкаи т.д.). В результате на экране отобразится окно, которое представлено на рис. 3.2.
Рис. 3.2. Настройка программы, вкладка Подсветка
Как видно на рисунке, данное окно состоит из трех вкладок: Стиль, Подсветкаи Основные, причем по умолчанию открывается вкладка Подсветка. На данной вкладке можно выбрать цветовое оформление элементов программного кода: комментариев, ссылок, и др. Для этого нужно нажать кнопку Выбрать, расположенную справа от названия соответствующего элемента, и в открывшемся окне установить требуемый цвет. При желании вы можете в любой момент вернуться к цветовому оформлению, которое используется в программе по умолчанию – для этого нужно нажать кнопку Восстановить исходные значения.
На вкладке Стиль(рис. 3.3) осуществляется настройка стиля оформления программного кода веб-страницы.
Рис. 3.3. Настройка программы, вкладка Стиль
Вы можете выбрать любой фоновый цвет, а также цвет шрифта. Для этого нажмите кнопку Выбратьи выполните соответствующие настройки в открывшемся окне. По умолчанию в качестве фонового цвета предлагается белый, а в качестве цвета шрифта – черный. Сам шрифт выбирается из раскрывающегося списка в поле Шрифт, а его размер – в поле Размер. Чтобы восстановить настройки, используемые в программе по умолчанию, нажмите кнопку Восстановить исходные значения.
Содержимое вкладки Основныепоказано на рис. 3.4.
Рис. 3.4. Настройка программы, вкладка Основные
На данной вкладке находится несколько параметров, определяющих общую направленность работы программы. Если вы пользуетесь Интернет-обозревателем Mozilla Firefox, рекомендуется установить флажок Включить поддержку стандартов браузера Мозилла (действует на ссылки). Если установить флажок При каждом просмотре странички файл сохраняется в виде копии (иначе страничка постоянно сохраняется автоматически), то при каждом просмотре результатов проделанной работы веб-страница будет сохранена в виде копии. При снятом данном флажке сохранение изменений осуществляется автоматически через определенные интервалы времени.
Флажок Включить быструю систему ввода теговбез серьезных причин снимать не рекомендуется (по умолчанию он установлен).
Вы можете указать страницу, которая будет автоматически загружаться при каждом запуске программы. Это удобно, когда на протяжении нескольких разных сеансов работы вы занимаетесь одной и той же страницей: она будет открываться для редактирования при каждом запуске программы. Для этого нужно на вкладке Основныенажать кнопку Выбрать, и в открывшемся окне указать путь к файлу этой страницы. В результате этот путь отобразится в поле Открывать страницу при запуске.
Все изменения, выполненные на вкладках окна настройки параметров программы, вступают в силу только после нажатия в данном окне кнопки ОК. С помощью кнопки Отменаосуществляется выход из данного режима без сохранения выполненных изменений. Обе эти кнопки доступны на всех вкладках окна.
Создание, открытие и сохранение веб-страниц
С помощью программы вы можете создавать новые веб-страницы, а также редактировать созданные ранее.
Чтобы создать новую веб-страницу, нужно выполнить команду главного меню Файл ► Создать, вызываемую также нажатием комбинации клавиш Ctrl+N. Также для этого можно воспользоваться кнопкой Новый файл, находящейся в панели инструментов. При выполнении любого из перечисленных действий программа выдает запрос на сохранение изменений в текущем файле (напомним, что программа по умолчанию выполняет автоматическую разметку веб-страницы, поэтому рабочая область при любом запуске программы пустой не будет).
Чтобы открыть созданный ранее файл веб-страницы (например, для редактирования), нужно выполнить команду главного меню Файл ► Открыть, вызываемую также нажатием комбинации клавиш Ctrl+O. Также для этого можно воспользоваться кнопкой Открыть, находящейся в инструментальной панели (напомним, что названия кнопок инструментальных панелей отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране открывается окно, в котором нужно указать путь к требуемому файлу и нажать кнопку Открыть. Отметим, что этот файл должен иметь расширение html, htm или php.
Чтобы сохранить выполненные в текущем файле изменения, нужно выполнить команду главного меню Файл ► Сохранить, которая вызывается также нажатием комбинации клавиш Ctrl+S. Также для этого можно воспользоваться в инструментальной панели кнопкой Сохранить. При первом сохранении файла на экране открывается окно, в котором нужно указать его имя, а также путь для сохранения. Впоследствии при работе с данным файлом такое окно открываться не будет, а просто сохранятся изменения.
При необходимости вы можете сохранить выполненные изменения в отдельном файле под другим именем. Для этого нужно выполнить команду главного меню Файл ► Сохранить как, после чего в открывшемся окне ввести имя файла и указать путь для его сохранения.
С помощью команды Файл ► Открыть в браузеревы можете в любой момент посмотреть, как будет выглядеть текущая веб-страница в окне Интернет-обозревателя. Помните, что перед этим необходимо сохранить все выполненные изменения.
Ввод и редактирование текстового контента веб-страницы
Как мы уже отмечали ранее, вся работа с контентом веб-страницы ведется в рабочей области окна программы, а с помощью расположенных вверху вкладок выбирается требуемый режим работы и, соответственно, инструменты, которые необходимы в данный момент.
Для выполнения основных действий по работе с текстовым контентом предназначены инструменты, которые находятся на вкладке Общие(содержимое данной вкладки показано на рис. 3.1). Рассмотрим порядок использования каждого из них.
С помощью кнопки Шрифтосуществляется переход в режим настройки параметров шрифта. При нажатии данной кнопки на экране отображается окно, которое показано на рис. 3.5.
Рис. 3.5. Настройка параметров шрифта
На данном рисунке представлены настройки шрифта, которые используются в программе по умолчанию. Если вы хотите применить какой-то другой шрифт – выделите в программном коде соответствующий фрагмент текста, после чего нажмите кнопку Шрифти укажите настройки (тип шрифта, его начертание, размер, и др.). После нажатия в данном окне кнопки ОКвыделенный текстовый фрагмент будет заключен в контейнер между тегами . Причем эти теги будут задействованы с соответствующими выполненным настройкам атрибутами, регламентирующими тип шрифта, его цвет и иные параметры (например, как в листинге 2.1).
Листинг 2.1. Фрагмент программного кода с настройками шрифта
Этот файл создан для примера
В данном случае настройки шрифта применены к тексту Этот файл создан для примера.
Справа от кнопки Шрифтнаходится четыре кнопки, предназначенные для выравнивания выделенного текстового блока соответственно по центру, по левому краю, по правому краю и по ширине (названия этих кнопок отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При нажатии любой из них в программный код страницы будут внесены соответствующий изменения.
Далее следуют кнопки, с помощью которых можно включить полужирное, курсивное, подчеркнутое или зачеркнутое начертание шрифта. Если, например, вы хотите отобразить какое-то слово или словосочетание полужирным шрифтом – выделите его, а затем нажмите кнопку Ж. В результате выделенный фрагмент будет заключен в теги , которые, как известно, включают полужирное начертание.
Следующая кнопка называется Параграф. Она предназначена для разбиения текста на параграфы. При ее нажатии в программный код документа вставляется тег с атрибутом >. При необходимости вы можете вручную добавить атрибут align: в зависимости от значения ( left, centerили right) он позволяет выровнять параграф соответствующим образом по горизонтали. Далее следует кнопка, которая называется Перенос строки. Уже судя по отображаемым на ней символам ( BR) нетрудно догадаться, что она предназначена для перевода текста на следующую строку, то есть для создания абзаца. При ее нажатии в программный код (а именно – в то его место, где в данный момент находится курсор) будет вставлен тег Листинг 2.2. Перевод текста на следующую строку
(фрагмент такого кода показан в листинге 2.2).
Этот файл создан для примера.
Если нужно, будет сформирован еще один такой файл.
В данном примере вторая фраза будет начата с новой строки.
Следующие четыре кнопки предназначены для создания неупорядоченных, нумерованных и маркированных списков. При их нажатии в программный код добавляются соответствующие теги (например, при создании неупорядоченного списка – теги и , и т.д.).
ПРИМЕЧАНИЕ
С помощью соответствующих кнопок вы можете формировать маркированные списки как с квадратными, так и с круглыми маркерами.
Далее следует шесть кнопок, которые перечислены ниже (напомним, что их названия отображаются в виде всплывающих подсказок при подведении указателя мыши).
• Мелкий шрифт– при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице уменьшенным шрифтом относительно расположенного рядом текста.
• Крупный шрифт– при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице укрупненным шрифтом относительно расположенного рядом текста.
• Нижний индекси Верхний индекс– эти кнопки предназначены для сдвига выделенного слова или текстового фрагмента соответственно вниз или вверх относительно расположенного рядом текста (иначе говоря, включается нижний или верхний индекс).
• Форматированный текст– данную кнопку удобно использовать для вставки в программный код веб-страницы уже отформатированного текста. У этого текста будут сохранены все пробелы и переносы.
• Текст фиксированной ширины– при нажатии данной кнопки выделенный текст будет отображаться в окне Интернет-обозревателя моноширинным шрифтом.
Последний параметр на данной вкладке предназначен для формирования заголовков. Как мы уже отмечали ранее, в языке HTML возможно использование заголовков шести уровней. Поэтому вначале нужно выделить слово или словосочетание, которое будет являться заголовком, затем из раскрывающегося списка выбрать требуемый уровень заголовка и нажать кнопку Заголовок(на ней отображается символ Н).
Вставка специальных элементов
Возможности программы предусматривают вставку в контент веб-страницы специальных элементов – гиперссылок, изображений, фреймов и т. д. Необходимый для этого инструмент находится на вкладке Специальные, содержимое которой показано на рис. 3.6.
Рис. 3.6. Вкладка Специальные
Ранее мы уже говорили о том, что одним из главных элементов любой веб-страницы является гиперссылка. В программе CatsHtml процесс создания гиперссылок автоматизирован: для этого нужно воспользоваться кнопкой Вставить ссылку, которая является на вкладке Специальныекрайней слева.
Чтобы вставить гиперссылку, нужно выделить слово или текстовый фрагмент, который будет являться ссылкой, и нажать кнопку Вставить ссылку. В листинге 2.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово сформирован.
Листинг 2.3. Вставка гиперссылки
Этот файл создан для примера. Если нужно, будет сформирован еще один такой файл.
В сформированном коде остается лишь ввести вручную адрес гиперссылки, являющийся значением атрибута href.
Чтобы вставить в документ изображение, нужно нажать на вкладке Специальныекнопку Вставить картинку, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки на экране отображается окно, в котором нужно указать путь к файлу изображения. В листинге 2.4 показан фрагмент кода со вставкой изображения из файла Образец.html.
Листинг 2.4. Вставка изображения
Этот файл создан для примера.
Если нужно, будет сформирован еще один такой файл.
Кнопка Вставить пробелпредназначена для вставки пробела. Дело в том, что в языке HTML существует следующая особенность: сколько бы раз вы ни нажимали клавишу Пробел, он будет распознавать это как один пробел. Иначе говоря, увеличить расстояние между словами путем многократного нажатия клавиши Пробелу вас не получится: оно все равно будет равняться одному пробелу. Для решения этой проблемы в языке HTML предназначен специальный инструмент : он равняется одному пробелу. В листинге 2.5 приведен фрагмент программного кода, когда между словами файли создан, а также будети сформированвставлены дополнительные пробелы.
Листинг 2.5. Вставка пробелов
Этот файл создан для примера.
Если нужно, будет сформирован еще один такой файл.
С помощью кнопки Вставить горизонтальную строкуможно включить в состав веб-страницы горизонтальную полосу на всю ширину страницы. При нажатии данной кнопки в программный код (а именно – в то его место, где находится курсор) будет добавлен тег
.
Далее расположены две кнопки, с помощью которых в программный код добавляются элементы <и >. Они предназначены для добавления на веб-страницу символов соответственно <и >(эти символы используются в языке HTML для заключения тегов, а потому сами по себе не распознаются).
Следующие три кнопки предназначены для работы с фреймами. Первая кнопка определяет фреймовую структуру документа, а также размеры фреймов и расположение их на странице. Вторая предназначена для определения фрейма и его свойств внутри frameset-структуры. Третья кнопка предназначена для включения режима, при котором все, что находится между начальным и конечным тэгами данного элемента, будет отображено Интернет-обозревателем, если он не поддерживает фреймы.
Вставка дополнительных эффектов
На вкладке Эффектысодержатся кнопки, с помощью которых вы можете вставлять в веб-документ дополнительные эффекты. Одним из самых популярных таких эффектов является бегущая строка.
При нажатии на данной вкладке кнопки Вставить бегущую строкув программный код документа добавляются теги , специально предназначенные для создания эффекта бегущей строки.
Использовать данную кнопку можно двумя способами. Первый заключается в том, чтобы перед ее нажатием выделить слово или текстовый фрагмент, которые должны отображаться в виде бегущей строки. В этом случае сразу после нажатия кнопки этот фрагмент будет заключен между тегами . Второй способ заключается в том, что перед нажатием кнопки текст не выделяется. В этом случае в программный код будут просто добавлены теги , а текст бегущей строки нужно будет ввести между ними.
При желании вы можете вставлять в свой веб-документ флеш-объекты. Для этого нужно на вкладке Эффектынажать кнопку Вставить флеш-объект. После нажатия данной кнопки в программный код веб-страницы будет добавлен код, который в листинге 2.6 находится между уже знакомыми нам фразами.
Листинг 2.6. Вставка флеш-объекта
Этот файл создан для примера.
Если нужно, будет сформирован еще один такой файл.
При необходимости в данный код вы можете внести любые необходимые изменения вручную.
Вставка таблицы в веб-документ
Многие современные веб-ресурсы используют табличное представление данных. Это удобно, наглядно, эргономично, к тому же позволяет на относительно небольшом пространстве поместить немало информации.
В программе CatsHtml реализована возможность автоматического формирования таблиц. Для этого предназначены инструменты, находящиеся на вкладке Таблица. Содержимое данной вкладки представлено на рис. 3.7.
Рис. 3.7. Инструментарий для формирования таблиц
Как видно на рисунке, данная вкладка содержит четыре кнопки. Рассмотрим назначение каждой из них.
С помощью кнопки Таблицав документ вставляются теги
, причем первый из них используется с атрибутом border, имеющим значение 1. Это означает, что создаваемая таблица будет иметь рамку с шириной линий 1 пиксель.
Кнопки Строкаи Столбецпредназначены соответственно для вставки в документ новых строк и столбцов таблицы. При нажатии кнопки Строкав программный код добавляются теги , при нажатии кнопки Столбец– теги
Кнопка Гот. таблицапозволяет вставить в документ заготовку готовой таблицы (то есть таблицу, состоящую из одной ячейки). Например, откроем с помощью команды главного меню Файл 4Открытьуже знакомый нам тестовый файл Test.html (см. рис. 2.11), выделим в нем слова Эта страница, и нажмем кнопку Гот. таблица. В результате программный код веб-страницы будет выглядеть так, как показано в листинге 2.7.
Листинг 2.7. Вставка заготовки таблицы
|
Эта страница |
Теперь сохраним выполненные изменения с помощью команды главного меню Файл ► Сохранитьили нажатием комбинации клавиш Ctrl+S, а после этого выполним команду Файл ► Открыть в броузере. Результат выполненных действий показан на рис. 3.8.
Рис. 3.8. Таблица из одной ячейки
Как видно на рисунке, предварительно выделенный в программном коде текст помещен в таблицу, состоящую из одной ячейки.
